摘要：当我们想根据屏幕尺寸来自动变化页面布局时，我们会像这样做在浏览器上调整窗口大小，可以看到网页的响应能力是乎没有任何问题的。在正式发布之前，还是先继续使用标签吧，如果有兴趣的话可以尝试一下测试版的。
新人翻译，欢迎转载~
英文原文地址：http://bitsofco.de/2015/respove-design-viewport/
原文例程地址：https://github.com/ireade/viewports
（可下载例程参照阅读）
当我们在做响应式设计时，关注最多的是CSS的@media查询。不可否认，@media查询完成了很多工作，但一个网站的响应能力还是取决于对Viewport的控制。当我们想根据屏幕尺寸来自动变化页面布局时，我们会像这样做：
@media screen and (min-width: 960px) {
body { background-color: green; }
}
@media screen and (max-width: 960px) and (min-width: 500px) {
body { background-color: pink; }
}
@media screen and (max-width: 500px) {
body { background-color: yellow; }
}
在浏览器上调整窗口大小，可以看到网页的响应能力是乎没有任何问题的。
那么问题来了在移动端浏览页面时就出现异常了。
（没有进行Viewport控制的iPhone6上的显示效果）
页面虽然可以看到，但不能自适应手机的屏幕。之所以会有这样的问题，是设备尺寸和Viewport尺寸不一致导致的。为了更好的理解这两个尺寸之间的不同点，下面就简单说说：
设备像素：这个是物理层面的像素数量，比如一台iPhone6，是375x667像素。（注：这里所说的设备像素有两种类型，硬件像素和设备独立像素，不过这个区别与此文无关）；
CSS像素：这个是我们在CSS使用过程中的一个抽象的单位，它并没有一个绝对的尺寸，页面上单个CSS像素的大小完全取决于Viewport的大小；
Viewport：Viewport决定了页面的像素密度。比如一个宽750px的Viewport，表示屏幕上横向排布了750个CSS像素（Viewport在未缩放的情况下）。
Viewport是"无关设备"的，它不知道也不关心我们的设备到底有多大的屏幕。
大多数显示器的Viewport尺寸默认在800px到1024px之间，这就解释了为什么之前我们的例程可以在电脑上正常显示而不用管当前屏幕的尺寸。
通过meta标签来控制Viewport可以设置meta标签中的viewport信息，以解决Viewport尺寸不匹配的问题。meta标签的用法如下：
标签内容中有6个关键字：
width
height
initial-scale
minimum-scale
maximum-scale
user-scalable
WIDTH可以用width来设置viewport的宽度，以替代那些不合适的默认宽度。我们可以给其设定一个固定大小，但设定成device-width更加明智一些，这样我们可以兼容不同大小的屏幕。
加了这句话之后，我们的例程看起来就正常多了。
（在iPhone6上设置width=device-width之后的显示效果）
在移动设备上，用户有时会需要缩放页面，当页面缩放时，Viewport的像素尺寸也会相应的改变，但CSS尺寸不会变。
比如，在一个400px宽的Viewport中有一个元素，设定width: 100px;，这时该元素就横跨了1/4的屏幕。如果用户把页面放大到两倍大小，这时Viewport宽度变成了200px，但元素仍然宽100个CSS像素。这时这个元素就占了半个屏幕了。
我们可以通过initial-scale来设置CSS像素和Viewport像素之间的比例，通常情况下是1:1。这个参数的设置可以很好的解决width=device-width设置所带来的问题。有些移动设备浏览器会在纵向模式时默认使用设备宽度，当切换到横向模式时页面显示就会不正常。
（在没有设置initial-scale的横向iPhone6上的显示效果）
如图所示，当iPhone处于横向模式时，我们看到的还是宽度小余500px时的页面状态。不过不要慌张，我们可以通过设置initial-scale为1来解决这个问题。
（在设置了initial-scale的横向iPhone6上的显示效果）
这几个参数用来控制页面的缩放能力。
Maximum-scale：这个是用户可以缩放页面的最大比例。比如说设置为1，用户就无法缩放页面。假如设置为2，用户就可以把页面放大到1个CSS像素等于2个Viewport像素的大小；
Minimum-scale：这个是用户可以缩放页面的最小比例。假如设置为2，页面的最小比例就是原比例的两倍，并且无法缩小到原始比例；
User-scalable：如果设置了user-scalable=no，用户将无法对页面进行缩放。
由于这几个参数限制了用户对页面的操作，通常不建议使用它们。
用CSS来控制Viewport虽然现在很多人都在用viewport，但其实viewport并不是HTML5标准中的正式成员。W3C目前正在研究将viewport以@viewport规则的形式加入到CSS当中，@viewport规则与viewport标签有异曲同工之妙，只是将用于布局的viewport归还给CSS，现在已经有部分开发者在尝试@viewport了。
@viewport {
zoom: 1.0; /* same as initial-scale=1 */
width: device-width;
}
/* Vendor specific prefixes */
@-ms-viewport
@-webkit-viewport
@-moz-viewport
@-o-viewport
在@viewport正式发布之前，还是先继续使用viewport标签吧，如果有兴趣的话可以尝试一下测试版的@viewport。
总结为了保证你的响应式页面能够在移动端正常运行，把下面这句话加到你的元素里面吧~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49587.html
摘要：当我们想根据屏幕尺寸来自动变化页面布局时，我们会像这样做在浏览器上调整窗口大小，可以看到网页的响应能力是乎没有任何问题的。在正式发布之前，还是先继续使用标签吧，如果有兴趣的话可以尝试一下测试版的。 新人翻译，欢迎转载~ 英文原文地址：http://bitsofco.de/2015/respove-design-viewport/ 原文例程地址：https://github...
摘要：今天在这里就略微谈一下响应式布局吧想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一接下来我们从小到大来谈谈响应式网页设计的基本原则为什么为什么需要响应式设计想必这点不说大家都能想到答案现在是一个移动为先的时代我们要 今天在这里就略微谈一下响应式布局吧,想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一,接下来我们从小到大来谈谈响应式网页...
摘要：常用单位在中可以用很多不同的方式来设定字体的尺寸。当你为一个元素添加单位时，应当考虑到所有父元素的字体尺寸。例宽度是中新提出的一个单位，通过宽度来计算字体尺寸。 个人翻译，转载请注明出处 英文原文：CSS Font Sizing 写在前面 上一篇文章如何做好移动端的响应式设计：Viewport控制讨论到了CSS像素，于是我决定研究一下如何用不同的方式来在CSS中设定字体...
摘要：正文概念本次要谈的移动不是，只是很普通的移动端的界面。默认行为作为之前开发端的人员，第一反应就是如何把那么大的界面内容展现到手机小小的屏幕上。就是在显示多行文字的时候，可能需要在自己期望显示多少行之后，省略后面的文字，然后以。。。 前言 开发生涯总是丰富多采，工作多年，不同领域还是逃不过雨露均沾，之前开发过android，微信，ios，web网站也玩过。但是对于移动web这一块，确实没...
阅读 2397·2021-11-19 09:59
阅读 1917·2019-08-30 15:55
阅读 890·2019-08-29 13:30
阅读 1312·2019-08-26 10:18
阅读 3065·2019-08-23 18:36
阅读 2362·2019-08-23 18:25
阅读 1141·2019-08-23 18:07
阅读 412·2019-08-23 17:15
