关键词：
为了做到一次开发的网页能够在不同尺寸的移动端设备上适配，我们需要使设计稿上标注的固定尺寸在不同设备上按照设备大小的比例显示不同的尺寸。
比如设计稿是按照 IPhone6 的 750px 像素设计的，设计稿上的头部导航条的高度是75px。
那么在 IPhone6 的手机上导航条显示的高度就是75px，在640px像素的手机上显示的高度就应该是(640/750) * 75 = 64px,以此类推，在不同像素手机上元素的大小就是(实际设备大小/设计稿大小)*设计稿上该元素的大小。
而在实际开发中，我们不可能通过这样的计算来设计每一个元素的宽高，因为代价太大。
那么既然一个元素在不同设备上的大小比例等于不同设备之间的比例，显然这里我们需要一个变量，这个变量与设备大小相关，是根据不同设备计算出来的不同的值，元素实际大小 = 一个常量 * 该变量。
常量自然取得是设计稿中的大小，那么答案呼之欲出，变量用的就是css新特性中的REM值，这个属性本身就是一个变量
当然设计rem值的核心就是通过js来根据设备的大小，按照公式计算出html的font-size值
这里介绍两种做法：
-
淘宝做法
把rem值设为设备大小/10，比如750px的rem=75px;640px的rem=64px,那么设计稿（750px）中一个75px的元素用rem表示就是1rem，由此可以做到在640设备里显示是64px。所以在根据750px的设计稿编写css时，元素的大小就是（设计稿标注大小 / 75(设计稿的rem值)）+ 'rem'
但是这种方法的缺点就是有时结果是十分复杂的小数，不便计算
-
网易做法
接着上述淘宝描述，为了方便计算，我们现在不想让元素的大小还需要除以75这个750px中的rem值，而是想让750px中的rem值是1，也就是说750px设计稿中的rem计算为(750 / 750) = 1,那么当然为了保证别的设备中的rem值能够和750px中的rem值拥有原有的比例关系（也就是实际设备大小 / 设计稿大小），就需要这样计算设备的rem值：(设备大小 / 750)。
如此，就可以在设计元素的大小直接使用设计稿中的大小，但是单位要换为rem。
总结：这两种方案十分类似，只是在计算的方法上有所不同，但是最为最为关键的要点就是保证不同设备rem值之间的比例等于设备大小的比例，如此才能保证元素在使用rem作为单位时也保有相同的比例，从而做到真正的适配方案。
参考文章：http://www.cnblogs.com/well-nice/p/5509589.html
移动端高清多屏适配方案——rem
背景：开发移动端H5页面一套设计图不同尺寸的手机不同分辨率的手机方案：使用rem作为单位解决一套设计图适应不同分辨率，不同尺寸的手机。概念：REM(fontsizeoftherootelement).相对于<html>的font-size的计算方式。dpr(devicepixelrati... 查看详情
基于rem的移动端响应式适配方案(详解)移动端h5页面的设计稿尺寸大小规范
基于rem的移动端响应式适配方案(详解)： https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.com/v/53039.html 查看详情
移动端适配方案(代码片段)
首先，我们需要知道rem和em的基本概念。rem:相对于html根元素的fontsize。em:相对于当前元素的字体大小。rem和em都能够根据屏幕大小做适配。 一、假设现在给出我们一张750px的设计图，我们在设计图上量出200px*200px的div大小，并... 查看详情
08-移动端开发教程-移动端适配方案
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。1.常见的适配方案百分比+固定高度布局方案固定屏幕为理想视口宽度少许的媒体查询设置... 查看详情
rem,vw,还是...?各凭本事的移动端适配方案(代码片段)
...假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页... 查看详情
移动端适配方案-rem(基础篇)
常见移动web适配方案一般有3种方法，如下图： ①：定高，宽度百分比（百分比适配简单，一般用来做一些适配性不高的页面，比如只有一些文字和图片等简单的屏幕适配） ②：flex（更多的用于复... 查看详情
vant移动端rem适配方案
参考技术A1、Vant中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：[lib-flexible用于设置rem基准值，设置根字体的大小postcss-pxtorem是一款postcss插件，用于将单位转化为rem2、使用lib-flexible动态设置REM基准... 查看详情
为什么说移动端该放弃rem适配方案了？
...真原文：https://juejin.cn/post/70849266460330557521.背景在做移动端各种尺寸屏幕的适配时，用的最多的就是rem方案。我们都写过这样的代码,来设置根字体大小。这个计算公式中设备宽度，UI设计稿尺寸这两个参数比较好理解&... 查看详情
第130天：移动端-rem布局
...相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局... 查看详情
移动端rem自适应设置
对于移动端自适应各种终端的解决方案较多，本篇只是选择其中一种rem适配，我个人做移动端最喜欢的方案。rem就是以html根元素的字体大小为参考，比如html:font-size:20px;1rem=20px;2rem=40px.....，因为移动端的屏幕特殊之处，主要是不... 查看详情
移动端适配js
移动端适配方案非常多，入行两年来始终没有一直使用一个标准，每个项目都按照业务需求来做适配方案一：最初听李彦辉老师的课程使用rem布局了一段时间，但是字体计算比较麻烦，也不太精确方案二：偶然在Q群里一群友分... 查看详情
移动端适配---rem适配
rem适配<metaname="viewport" content="width=device-width,user-scalable=no"/><script> (function() varhtml=document.documentElement; varhWidth=html.getBoundingClientRect().width; 查看详情
还在用rem做移动端适配？最新移动端适配方案vw,vh了解一下！(代码片段)
vw,vh都是相对于屏幕视口的单位。vw:相对于视口的宽度。视口被均分为100单位的vw；vh:相对于视口的高度。视口被均分为100单位的vh；vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax；vmin:相对于... 查看详情
移动端适配的问题
1.如何适配？想要在移动端的不同尺寸设备间做适配，使得页面布局可以等比例缩放。于是我立刻想到了百分比布局和rem布局。百分比布局无法适配性定高，只能用px定死，显然这是无法接受的。rem布局不是响应式布局方案，它... 查看详情
移动端适配方案总结(代码片段)
目录一、背景介绍1.1为什么要进行移动端适配1.2移动端适配方案二、rem方案2.1什么是rem2.2怎么根据屏幕尺寸设置根元素html的font-size2.3postcss-pxtorem三、viewport方案3.1什么是viewport方案3.2postcss-px-to-viewport四、总结（如果只想看实... 查看详情
移动端页面使用rem来做适配
移动端页面使用rem来做适配rem介绍rem（fontsizeoftherootelement）是指相对于根元素（即html元素）的字体大小的单位。假设根元素的字体大小是10px,则5rem的大小为 5*10=50px,例如1html{2font-size:10px;3}4width:2rem;/*2*10=20px;*/5margin:1rem;6}7img{8wi... 查看详情
移动端rem适配
varhtml=document.getElementsByTagName("html")[0];functiongetFontSize(){varwidth=document.documentElement.clientWidth||document.body.clientWidth+"px";varfontSize=(100/750)*width;if(width>=750){fontS 查看详情
移动端适配方案以及rem和px之间的转换
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：1... 查看详情