移动端适配的几种方案：

rem方案 rem+vw方案 百分比 基于媒体查询的响应式设计

rem方案的原理： rem是相对长度单位，相对html元素（文档根元素doucment.documentElement）计算值的倍数。根据屏幕宽度设置html标签的font-size，在布局时使用rem单位，达到自适应的目的，是弹性布局的一种实现方式。 当页面全屏显示时，设置 html 默认字体大小为100px，则子元素中1rem就等于100px，相当于设计稿中的1px等于0.01rem，使用的时候设计稿中的尺寸直接除以100，100px就是1rem，10px就是0.1rem。

PC端

export default class Rem { static init(){ //设置默认尺寸 Rem.defaultStyle(); //缩放后，重新计算html字体大小 Rem.resizeHandler(); //监听浏览器缩放事件 window.addEventListener("resize", Rem.resizeHandler); } //计算html字体大小 static resizeHandler() { let contW = Math.floor(document.documentElement.clientWidth); let fontS = (contW / screen.width) * 100; document.documentElement.style.fontSize = fontS + "px"; } //设置html默认字体为100px body字体为16px static defaultStyle(){ document.documentElement.style.fontSize = "100px"; document.body.style.fontSize = "16px"; } //px 转换成 rem static getRem(size) { var fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize); return size / fontSize; } }

移动端

(function(w){ var docEl=w.document.documentElement; var timer; function refersh(){ var width=docEl.getBoundingClientRect().width; if(width>750) width=750; var rem = width/7.5; docEl.style.fontSize=rem+"px"; } w.addEventListener("resize",function(){ timer && clearTimeout(timer); timer=setTimeout(refersh,400) }) w.addEventListener('pageshow', function () { timer && clearTimeout(timer); timer = setTimeout(refersh, 400) }) })(window)

rem+vw方案

vw/vh方案计算方便，能够很好地实现适配效果，但是存在一定的兼容问题，将vw/vh方案和rem方案相结合，设置html元素的font-size单位为vw，然后在布局中直接使用rem单位。

例如，设计稿的宽度为750px，则1vw=7.5px，为了方便计算，我们将html元素的font-size大小设置为100px，也就是13.333vw=100px。

html{font-size:13.333vw} 1 设置html{font-size:13.333vw}，在样式代码中1rem=13.333vw=100px，即1rem等于设计稿上的100px，使用的时候除以100，直接小数点向左移动2位，1rem等于100px，那么10px就是0.1rem。

这样的好处是不需要使用postcss-pxtorem 插件来转换单位，如果使用插件，想写px的地方还需要设置propList或者selectorBlackList。使用这种方案的话就不存在这个问题了，想用相对单位就写rem，想用绝对单位就写px，不需要其他的设置。

这种方案的优点：从rem方案过渡到vw，只是需要通过改变根元素字体大小的计算方式，将单位改成vw，不需要其他处理。

这种方案的缺点：，这种方案只对手机的兼容性很好，ipad或者是pc端的效果就不是很好。因为根节点的字体单位使用的是vw，当设备的宽度越来越大时，使用rem做单位的元素也会越来越大，以至于在ipad或者是pc上展示的效果会很差。

解决方案：当屏幕过大的时候，我们可以使用媒体查询来限制根元素的字体大小，实现对页面的最大最小宽度限制。

例如，在样式中加上这句代码，在pc上效果也很不错了。

@media (min-width: 560px) { html { font-size: 54px; } }

.百分比方案

相对于父元素的宽度，使用百分比的单位来定义子元素的宽度。子元素的高度使用px来定义，使用max-width/min-width 控制子元素的最大最小尺寸。

属性 参考对象 height/width 相对于子元素的直接父元素 top/bottom/left/right 相对于有定位属性的父元素 padding/margin 相对于直接父元素 border-radius 相对于自身 这种方式的优点是原理简单，不存在兼容性问题。

缺点是

字体大小无法随着屏幕大小变化而改变； 设置盒模型的不同属性时，其百分比设置的参考元素不唯一，容易使布局问题变得复杂。

基于媒体查询的响应式设计

基于媒体查询的响应式设计，响应式设计，使得一个网站可以同时适配多种设备和多个屏幕，让网站的布局和功能随用户的使用环境（屏幕大小、输出方式、设备/浏览器）而变化，使其视觉合理，交互方式符合习惯。

css3中的@media，通过给不同分辨率的设备编写不同的样式规则实现响应式布局，使一个网站可以在不同尺寸的屏幕下显示不同的布局效果。主要用来解决不同设置不同分辨率之间的兼容问题，一般是指pc、平板、手机设备之间较大的分辨率差异。实现上不局限于具体的方案，通常是结合流式布局和弹性布局方案。比如给小屏幕手机设置@2x图，给大屏手机设置@3x图。

@media only screen and (min-width: 375px){ /样式1/ } @media only screen and (min-width: 750){ /样式2/ } 1 2 3 4 5 6 这种方案的优点是

能够使网页在不同设备、不同分辨率的屏幕上呈现合理布局，不单单是样式伸缩变换。 缺点是

如果要匹配足够多的设备与屏幕，一个web页面需要多个设计方案，工作量比较大。 通过媒体查询技术需要设置一定量的断点，到达某个断点前后的页面发生突兀变化，用户体验不太友好。