hth华体会体育综合app本人经验尚浅，在大牛们得出的数种适配方案的基础上也来谈谈这一问题//其实是入职前太颓废了，找点事做。

　　css像素，独立像素，物理像素，dpr，dpi，ppi)的阐明不再赘述。可以参考：走进视网膜

　　多终端适配即使某一套网页方案能完美地展示在不同操作系统、尺寸、分辨率、dpr的设备上。适配的原因相比也不用多说了——就是为了使网站各终端的用户都不流失。

　　如图，这个页面我没设置viewport，设计稿基于iphone6，所以页面内容宽度定为750px。很明显看出左右两旁的空白，即宽度为达到视口宽980px所产生的。

　　ua检测，再通过js自动设置的。一般不会固定为1或者某一特定数值。但也有特殊情况。稍后讨论。解决方案 前提设计师给出的视觉稿应该严格按照某一移动设备的屏幕物理像素制定宽度，高度视页面内容而定。业界一般是基于iphone5或者6给出相应尺寸。所以最常见的视觉稿有750px、640px的。而1080px的大多是基于6plus的。而其他的奇葩尺寸真心不建议了。hth华体会体育下载所以应事先约定好。

　　3、hth华体会体育下载弊端元素高度和图片大小以同一个尺寸在多种不同尺寸的设备下显示，没达到真正适配效果。无法适应结构复杂的页面布局。

　　页面只考虑移动设备，不考虑自适应，不需要做响应式布局。非h5专题活动页。如网易新闻、我之前做过的一个团购网站cocolife也用的是这种方式

　　乍眼看上去这种方法挺好的，全部按设计稿给出的元素大小写成固定px值，不需要各种单位转换。所看即所得，缩放交给浏览器，完全按视觉稿切图。但，为什么没有得到普片推广呢？

　　(min-width:320px)`这里的width实际上指的是viewport的宽度值，而我们的viewport已经固定成统一宽度了（如640px），所以，hth华体会体育下载无论在哪个尺寸的屏幕下，这句媒体查询也不再起作用了。

　　第三点是如果页面要嵌入到App中时，App是以webview的形式渲染页面的。webview实际上也是webkit内核，而最新的webkit内核对定宽支持不是很好，默认是以device-width来渲染的。

　　第四点是可能存在缩放失效的问题，某些安卓机不能正常的根据 meta 标签中 width 的值来缩放 viewport，需要配合 initial-scale（即上述js方式） 。三、淘宝的做法1、使用场景

　　值，然后为页面的元素采用rem的方式制定宽高。我们知道rem的占据像素值是由根元素的font-size

　　值大小决定的。打个比方，若html下设置了font-size:16px;那么1rem就相当于16px。淘宝的方案大致如下：

　　值设置成docWidth(视觉稿大小)/10，那么1rem大小同为docWidth/10。所以页面里的元素宽高为width/(docWidth/10)。举个栗子：若我们拿到一个基于iphone6的视觉稿，对其运用该种方式进行适配。由于iphone6视觉稿宽度为

　　使其水平居中。（保证内容在视线中央）使用js对container整体进行transform:scale()缩放，scale值根据屏幕窗口大小动态设置。2.1 推荐一个框架以快速搭建适配的h5pageResponsive

　　下。同时给.container设置固定的宽高，一般320*520的居多。c.进行动态缩放的js