宣读移动端自适应解决方案

当我们在做响应式设计时，关注最多的是CSS的@media查询。不可否认，@media查询完成了很多工作，但一个的响应能力还是取决于对Viewport的控制。当我们想根据屏@media@mediascreenand(min-width:960px){body{background-color:green;}}@mediascreenand(max-width:960px)and(min-width:500px){body{background-color:pink;}}@mediascreenand(max-width:500px){body{background-color:yellow;}}（没有进行Viewport控制的6上的显示效果Viewport尺寸不一致导致的。为了更好的理解这两个尺寸之间的不同点，下面就简单说设备像素：这个是物理层面的像素数量，比如一台6，是375x667像素。（注：CSS像素：这个是我们在CSS使用过程中的一个抽象的单位，它并没有一个尺寸，页面上单个CSSViewport的大小；Viewport：Viewport750pxViewport，表示屏幕750CSS像素（Viewport在未缩放的情况下）。Viewport是"无关设备"的，它不知道也不关心我们的设备到底有多大的屏Viewport800px1024px之间，这就解释了为什么之前我通过meta来控制可以设置meta中的viewport信息，以解决Viewport尺寸不匹配的问题。meta<meta<metaname="viewport"content="key=value,6initial-minimum-um-user-widthviewport的宽度，以替代那些不合适的默认宽度。我们可以给其设定device-width更加明智一些，这样我们可以兼容不同大小的屏<meta<metaname="viewport"content="width=device-（在6上设置width=device-width之后的显示效果INITIAL-在移动设备上，用户有时会需要缩放页面，当页面缩放时，Viewport的像素尺寸也会相应的改变，但CSS尺寸不会变。比如，在一个400px宽的Viewport中有一个元素，设定100px;1/4的屏幕。如果用户把页面放大到两倍大Viewport200px100CSS像素。我们可以过iitaale设置CS像素和eot像的比例通常情下是:idt=deicewidth（在没有设置initial-scale的横向6上的显示效果如图所示，当处于横向模式时，我们看到的还是宽度小余500px时的页面状态initial-scale1来解决这个问题。<meta<metaname="viewport"content="width=device-width,initial-（在设置了initial-scale的横向6上的显示效果USER-SCALABLE，UM-SCALE以及MINIMUM-21CSS2Viewport像素的大User-scalableuser-scalable=no，用户将无法对页面进行缩放。CSS来控制viewportviewport并不是HTML5W3C目前正在研究将viewport以@viewport规则的形式加入到CSS当中，@viewport则 有异曲同工之妙，只是将用于布局的viewport归还给CSS，现在已有部分开发者在尝试@viewport/*Vendorspecificprefixes*/@-ms-viewport@-webkit-viewp