关键词：
概述
之前写过一篇移动端font-size适配方案，但是在实践过程中，还是发现当时的思维太局限了，视野太窄了，所以现在补充更新一下，记录下来，供以后开发时参考，相信对其他人也有用。
我上一篇博文主要有2个误区，下面我一一记下来。
这篇博文参考了移动端适配方案(下)。
适配方案
有多种适配方案：
- 百分比布局：高度和宽度用百分比。由于高度和宽度的百分比是按照父元素尺寸的，所以改动父元素会使子元素发生变化，非常难以维护。
- px布局：固定宽度，viewport缩放。就是全部用px，然后用js控制initial-scale的缩放比例。这样在不同屏幕上面，页面都会按比例整体缩放，也比较方便维护。
- rem布局：rem做度量单位，改font-size。
需要注意的是，如果只实现页面整体放大缩小的话，方法1和方法2的效果是一样的！！！
适配目的
我之前说，我们的适配目的是：对于不同的屏幕，页面只需要简单地放大或缩小即可。对于这个目的，上面的方法2和3都能达到效果。
但是，人类发明更宽的设备，并不只是想看到更宽的字体或者更大的页面，而是想看到更漂亮的布局内容。而这才是响应式的精髓：根据不同大小的屏幕展现不同的内容给别人看！
所以从这一方面来看，方法2是远远不够的，所以我们需要方法3，优点有2个：
- 可以结合rem和px实现部分内容大小不变！
- 可以用rem响应式的为不同大小的屏幕展现不同的布局！
目前我只了解到了方法3这个程度，方法3有个局限性，就是对dpr不能很好地适配，所以以后如果有更好的兼容dpr的适配方案，我再记下来。
移动端高清多屏适配方案——rem
...的手机。概念：REM(fontsizeoftherootelement).相对于<html>的font-size的计算方式。dpr(devicepixelratio).设备像素比；i5,6=2;i6plus=3;<metacontent="width=de 查看详情
rem移动端适配方案(代码片段)
...bsp;二、js计算为了避免造成因为动态设置<html>元素的font-size而造成页面抖动，一般这部分代码我们放在header底部去加载，并内联到html文档里面。<scri 查看详情
移动端文字适配
...是文字不合适使用rem。很多浏览器自带点阵字体，当碰到font-size:13px,font-size:15px时会有很多问题。因此一般建议使用px。根据不同的dpr进行font-size大小的调整/*安卓低清设备*/div{width:1rem;height:0.4rem;font-size:12px;}/*iPhone4到iPhone6s,部分... 查看详情
移动端适配·
@mediascreenand(min-width:320px){html{font-size:85.5px;}}@mediascreenand(min-width:360px){html{font-size:96.1875px;}}@mediascreenand(min-width:375px){html{font-size:100px 查看详情
移动端适配方法
...00%=16px，1px=6.25%，所以10px=62.5%，rem是只相对于根元素htm的font-size，即只需要设置根元素html的font-size，其它元素或者字体都使用rem为单位设置成相应的百分比即可；例子：1html{font-size:62.5% 查看详情
js动态适配移动端font-size,单位：rem
...，大小为640*1010，适配苹果5的手机。方法步骤：1.我采用font-size=10px为640*1010手机的初始像素大小； 1rem=10px； 此时psd上有一个文字的大小为20px，即当前我的字体大小用rem表示为：font-size:1rem （psd上的大小为html上... 查看详情
移动端适配方案总结(代码片段)
...rem方案2.1什么是rem2.2怎么根据屏幕尺寸设置根元素html的font-size2.3postcss-pxtorem三、viewport方案3.1什么是viewport方案3.2postcss-px-to-viewport四、总结（如果只想看实现步骤可跳过前面直接看本节）4.1rem方案实现步骤总结4.2viewport方... 查看详情
前端适配
...可以按比例分配，vw和%是按设备大小分配rem相对于root的font-size适配大小，因此通过改变root的font-size改变全局适配大小，设计稿规定设备width=750px时，字体大小为30px先将html:font-size:30px如果一容器需要width=90px;就设置width=3rem然后监... 查看详情
移动端适配之rem笔记
/*移动端适配width|height|font-size=视觉稿量出来的值/100rem;@lbl*/@mediascreenand(max-width:359px)and(min-width:320px){html,body{font-size:50px!important;}}@mediascreenand(max-width:374px)and(min-width:360px){html, 查看详情
移动端屏幕适配问题
...css3出了一个新单位rem，rem就是相对于根元素<html>的font-size来做计算，根目录一般用20px（一是方便计算，二是谷歌浏览器不支持12px以下的字体）；html{font-size：20px}，默认为20px；@mediaonlyscreenand(max-width:1220px)and(min-width:992px){ ht... 查看详情
08-移动端开发教程-移动端适配方案
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。1.常见的适配方案百分比+固定高度布局方案固定屏幕为理想视口宽度少许的媒体查询设置... 查看详情
移动端，pc端是怎么做适配的？
...（面试：一个字的宽度）rem：rootem根元素（<html>）的font-size//oppo个别机型不适用vh：viewheight，视口高度100vh===视口高度vw：viewwidth，视口宽度100vw===视口宽度浏览器默认font-size:16px;Chrome浏览器默认最小字号为12px：font-size:12px;... 查看详情
移动端页面适配方案及原理(代码片段)
最近要接一个移动端的需求。类似歌曲排行榜的H5页。本人未雨绸缪，学习一波移动端适配方案。0.移动端vsPC端区别1.页面的三个视窗和缩放1.1layoutviewport和visualviewport:1.2idealviewport:1.3页面的缩放2.移动端适配2.1使用meta标签控... 查看详情
移动端媒体查询css3适配规则
该媒体查询适配规则是以UI设计图750p宽度为版本的，比如PS量的是450px，在书写时写(450rem/2/15).@media(min-width:240px)and(max-width:320px){html{font-size:12.8px!important}}@media(min-width:321px)and(max-width:360px){html{font-size:14. 查看详情
rem,vw,还是...?各凭本事的移动端适配方案(代码片段)
...假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页... 查看详情
为什么说移动端该放弃rem适配方案了？
...const rem = (deviceWidth *100) / 750; // 动态设置html的font-size document.querySelector('html').style.fontSize = rem + 'px';;查了一番资料才得知，rem方案是viewport的过渡方案，将设计稿除以100，等分为7.5份... 查看详情
m-移动端高清多屏适配方案
相关文档 rem 现在手机分辨率这么大，如何写响应式布局？ 查看详情
原创移动端高清多屏适配方案
移动端高清、多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉... 查看详情