1.前言响应式网页设计可以让一个网站同时适配多种设备和多种屏幕，让网站的布局和功能适应用户的环境（屏幕尺寸）、输入法、设备/浏览器功能）。本文主要介绍响应式布局中一些容易被忽略但又很重要的知识点。2.视口移动前端常说的视口（viewport），就是浏览器中用来渲染网页的区域。视口通常不等于屏幕大小，尤其是在浏览器窗口可以缩放的情况下。手机端和PC端的viewport是有区别的。电脑端视口宽度等于分辨率，而移动端视口宽度与分辨率无关。宽度的默认值由设备制造商指定。iOS和Android基本上将视口分辨率设置为980px。1、为什么手机上的视口设置为980px？乔布斯设想，如果苹果手机在市场上流行，但网站还没有来得及制作手机网页，那么用户就只能用手机访问电脑版的网页了。如何使用小页面在大屏幕上访问的屏幕上是否也可读？刚竹乔想给手机固定一个视口宽度，让手机的视口宽度和世界上大多数PC网页的宽度一样，也就是980px。这样，当你用手机访问电脑版网页时，旁边就没有空格了。但是页面缩放后，文字会变得很小，需要用户手动放大缩小才能看清楚，体验很差。2.约束视口为了解决前面的问题，可以在网页中加入如下一行代码：width=device-width视口为设备的宽度（即人为设置的宽度）//如果不设置，默认为980pxinitial-scale=1.0初始viewportsize是1.0倍maximum-scale=1.0最大倍数是1.0倍user-scalable=0不允许缩放viewport这个viewport的标签告诉浏览器如何渲染网页。这里，标签想表达的是：根据device-width渲染网页内容。其实看一下在支持这个标签的设备上的效果就明白了。不错！大大提升了用户体验！！！这时候如果你使用document.documentElement.clientWidth来测试浏览器屏幕的宽度，你会发现当前的视口宽度等于手机屏幕的宽度，大概的视口宽度在320到480之间（手机竖着使用时）。这个viewport的大小是手机厂商设置的，可以保证我们的文字，比如16px，在这个viewport里面是清晰的，恰到好处的。因此，屏幕较大的手机的受限视口>屏幕较小的手机的受限视口。这样可以保证我们的网页可以用px来写字号和行高。需要注意的是：约束后视口的宽度不是它自己的分辨率！！每个手机的分辨率都远远大于自己视口的宽度！最重要的一句话：前端开发工程师根本不关心手机的分辨率，我们只关心viewport。3、图片人们常说“一图抵千言”，这句话是对的。我们网站上关于松饼的文字再多也没有图片那么吸引人。接下来，我们将在页面顶部添加一张松饼图片（2000像素宽）。效果类似于引诱用户往下看的大标题图。哇，好大的图片，让整个页面看起来不平衡，图片横向溢出。不行，必须解决这个问题。可以使用CSS为图像指定固定宽度，但问题是我们希望它在不同尺寸的屏幕上自动缩放。例如，我们示例中的iPhone屏幕宽度为320像素。如果我们将图片设置为320像素宽，那么iPhone屏幕旋转后怎么办呢？这时320像素变成了480像素。解决方法很简单，一行css代码就可以让图片自动随容器宽度缩放：img{max-width:100%;}回到手机端，刷新页面，结果如下更符合预期。这里声明的max-width规则是为了保证所有的图片最大都按自己的100%显示（也就是只能按自己的尺寸显示）。此时，如果包含图像的元素（例如包含图像的body或div）小于图像的固有宽度，图像将被缩放以填充最大可用空间。为什么不使用宽度：100%？要实现图片的自动缩放，还可以使用更通用的width属性，比如width:100%。但是，这条规则在这里不适用。因为这个规则导致它看起来和它的容器一样宽。在容器比图像宽得多的情况下，图像将被不必要地拉伸。
