我目前正在设计一个可在320x480屏幕上完美运行的移动网站。问题出现了,因为新手机不再使用那么大的尺寸,而且要大得多。 (正如我在把所有的努力都放进去并在手机上阅读之后发现的那样。)我想知道是否有任何简单的方法可以让它扩展到我希望它看起来的正确尺寸而不用前进并给予一切视图宽度/视图或视图高度/视图等级。 (Nvm,我想知道这会对字体大小产生什么影响。)
或者我需要继续这样做,或类似的东西? (如果它不是移动友好的话会特别糟糕,因为涉及它创建的各种原因。)
答案 0 :(得分:1)
this可能有所帮助,这就是我们将响应式设计用作不同屏幕尺寸的解决方案的原因。以下内容已添加到<head>
,以便浏览器响应像素/屏幕大小。
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0">
同样media queires用于根据屏幕宽度更改设计,使用em代替px,因为px是绝对的,因为em将根据设备做出响应,您可以阅读更多here 。使用百分比而不是绝对大小(必要时),您可以在here上阅读更多内容。
答案 1 :(得分:0)
使用媒体查询,您应该看到类似
的内容@media(max-width:768px){.someClass{someCssStiling:xValue;}}
这意味着此样式仅适用于768px以下。 你可以在这里阅读有关媒体查询的文档(在很多其他地方,互联网上有很多文档):
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
希望有所帮助!