1.前言响应式网页设计可以让一个网站同时适配多种设备和多种屏幕，让网站的布局和功能适应用户的环境（屏幕尺寸）、输入法、设备/浏览器功能）。本文主要介绍响应式布局中一些容易被忽略但又很重要的知识点。2.视口移动前端常说的视口（viewport），就是浏览器中用来渲染网页的区域。视口通常不等于屏幕大小，尤其是在浏览器窗口可以缩放的情况下。手机端和PC端的viewport是有区别的。电脑端视口宽度等于分辨率，而移动端视口宽度与分辨率无关。宽度的默认值由设备制造商指定。iOS和Android基本上将视口分辨率设置为980px。1、为什么手机上的视口设置为980px？乔布斯设想，如果苹果手机在市场上流行，但网站还没有来得及制作手机网页，那么用户就只能用手机访问电脑版的网页了。如何使用小页面在大屏幕上访问的屏幕上是否也可读？刚竹乔想给手机固定一个视口宽度，让手机的视口宽度和世界上大多数PC网页的宽度一样，也就是980px。这样，当你用手机访问电脑版网页时，旁边就没有空格了。但是页面缩放后，文字会变得很小，需要用户手动放大缩小才能看清楚，体验很差。2、约束视口为了解决前面的问题，可以在网页的中加入如下一行代码：width=device-width视口为设备的宽度（即人为设定的宽度）//如果不设置，默认为980pxinitial-scale=1.0初始化视口大小是最大的1.0倍-scale=1.0最大倍数是1.0倍user-scalable=0不允许缩放视口这个视口的标签告诉浏览器如何渲染网页。这里，标签的意思是根据设备的宽度（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%。但是，这条规则在这里不适用。因为这个规则导致它看起来和它的容器一样宽。在容器比图像宽得多的情况下，图像将被不必要地拉伸。4.移动浏览器内核在移动端，独立的浏览器内核只有四种，分别是微软的Trident、Firefox的Gecko、开源内核Webkit、Opera的Presto。目前微软的Trident主要是移动端WP7、8系统的内置浏览器。Opera的Presto内核主要是OperaMobile、OperaMini、Openg浏览器和OpengHDBeta版。Webkit内核的适用范围比较广。Android原生浏览器、Apple的Safari、GoogleChrome（Android4.0使用）都是基于Webkit开源内核开发的。兼容前缀：1-ms-2-moz-3-o-4-webkit-中国用户浏览器市场份额：UC、安卓内置、Chrome、Safari、QQ浏览器均为webkit内核，从图中占比大部分的市场份额。所以一定要服务好-webkit-。有的公司干脆只写兼容-webkit-，不写-ms-等其他兼容。5.流式布局百分比布局也称为流式布局、flexbox布局。移动网页没有布局中心，左右都是满的。可以按百分比设置的属性有width、height、padding、margin。border和font-size等其他属性不能用百分比设置。width如果写成百分比，是指占父元素宽度的百分比。如果高度用百分比写，是指占父元素高度的百分比。padding如果写成百分比，是指占父元素宽度的百分比，不管是水平padding还是垂直padding。如果margin用百分比写，是指占父元素宽度的百分比，不管是水平margin还是垂直margin。边框的宽度不能用百分比来写接下来我们看一个例子：div{width:200px;高度：300px；填充：10px；}divp{宽度：50%;高度：50%；填料：10%；此时p的真实宽度是多少？此时p的真实宽度为140px*190px六、媒体查询1.为什么响应式网页设计需要媒体查询CSS3媒体查询允许我们针对特定的设备能力或条件将特定的CSS样式应用到网页中。没有媒体查询，仅靠CSS无法显着修改网页的外观。该模块允许我们预先编写适应许多不可预测因素的CSS规则，例如屏幕方向水平或垂直、视口大或小等。虽然灵活的布局可以让设计适应更多的场景，包括一定尺寸的屏幕，但有时这还不够，因为我们需要对布局做更细致的调整。这是通过媒体查询实现的，相当于CSS中的基本条件逻辑。2.媒体查询语法我们在媒体查询之外编写的第一个规则是“基本”样式，它适用于任何设备。在此基础上，我们逐步为具有不同视口和功能的设备添加不同的视觉效果和功能。body{背景颜色：灰色；}@mediascreenand(min-width:1200px){body{background-color:pink;}}@mediascreenand(min-width:700px)and(max-width:1200px){body{背景颜色：蓝色；}}@mediascreenand(max-width:700px){body{background-color:orange;}}其中@media表示媒体查询，查询当前正在查看此网页的设备及其宽度。screen表示用于查看此网页的设备是显示器，不是残疾人听力设备，也不是打印机。所有可能性都用和符号列出。注意：媒体查询只能包装选择器，不能包装k:v对。IE6、7、8不支持媒体查询，同时为了防止手机上部分浏览器不支持媒体查询，所以不要把所有选择器都放在媒体查询中。7、rem响应式布局rem响应式布局思想一般不会给元素设置具体的宽度，但是对于一些小图标，可以将具体的宽度值和高度值设置为固定值。设计稿有多大，我们会严格写出所有设置的固定值，全部以REM为单位（先在HTML中设置一个基准值：PX和REM对应的比例，然后在PX上得到PX值效果图，布局时转换成REM值）JS得到真实的屏幕宽度，让其除以设计稿的宽度，计算比例，根据比例重新设置之前的基准值，使得项目可以适配移动端。什么是rem，它和em有什么区别？REM单元的样式值是针对HTML元素的font-size的值动态计算的。em：表示父元素字体大小的倍数。（特例：在text-indent属性中，表示文字宽度）body→font-size:20px;→字体大小：2em；box1→字体大小：2em；box2→font-size:2em;box3
