本文作者：IMWeb 孙世吉 原文出处：IMWeb社区 未经同意，禁止转载
0. 前言手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者视觉上有特殊要求的，就需要通过其他手段来解决了。
以上图类“纪念碑谷”效果为例：
当你的页面素材都是单独的图片资源时，你完全可以通过百分比计算出每个动态小人的大小/位置/动画距离等信息；但是当所有的小图都被拼接成一张大的雪碧图时，当时我就眉头一皱，事情没有这么简单，元芳不知道你怎么看。
1. 老版常规做法1.1 viewport缩放以最小的Iphone4/5的宽度（320px）为基准，还原视觉稿。
代码语言：javascript复制
如果在iphone8（375px）下设置元素font-size为 1.7066rem， 效果跟设置其font-size为 24px 是一样的(24 / 14.0625 = 1.7066)。
上面的示例是个很简单的例子，感兴趣的同学可以在自己的页面上试一下或者开发者工具下打开 淘宝触屏版，使用rem设置元素的样式，并通过开发者工具切换模拟机型观察页面效果。
使用JS来获取屏幕宽度的好处在于可以100%适配所有的机型宽度，因为其元素的基准尺寸是直接算出来的。既然是JS代码，为了避免造成因为动态设置元素的font-size而造成页面抖动，一般这部分代码我们放在header底部去加载，并内联到html文档里面。
更加详细的实现，感兴趣的同学可以看这片文章：Rem自适应js-优化flexible.js。
3.2 媒体查询既然只是为了根据屏幕宽度来设置元素的字体大小，那我们完全也可以通过css3媒体查询来完成这部分工作。
代码语言：javascript复制@media screen and (min-width: 375px){
html {
font-size: 14.0625px;
}
}
@media screen and (min-width: 360px){
html {
font-size: 13.5px;
}
}
@media screen and (min-width: 320px){
html {
font-size: 12px;
}
}
html {
font-size: 16px;
}像苏宁易购等网站就是这么做的：
4. rem存在的问题rem作为一种简单粗暴解决不同屏幕下视图的区别的一种方案，它可以解决本文出现的问题以及绝大多数移动端适配屏幕尺寸的问题。但是既然它并不是一个完美的解决方案，那就有其局限性所在。
举个例子： 作者有一大爱好是看小说，大屏智能机时代确实几乎完全替代了我十年前纸质化阅读的习惯。从2011年至今，手上的手机屏幕宽度一直在提升，但是使用的看小说软件的显示字号几乎是不变的。使用rem会在一定程度上打破用户的文字内容阅读习惯，特别是在大篇幅的内容时。
iOS与Android平台的适配方式背后隐藏的设计哲学是这样的：阅读文字时，可读性较好的文字字号行距等绝对尺寸数值组合与文字所在媒介的绝对尺寸关系不大。（可以这样简单理解：A4大小的报纸和A3大小甚至更大的报纸，舒适的阅读字号绝对尺寸是一样的，因为他们都需要拿在手里阅读，在手机也是上同理）；在看图片视频时，图片、视频的比例应该是固定的，不应该出现拉伸变形的情况。而rem用在字号时，使字号在不同屏幕上的绝对尺寸不一致，违背了设计哲学。
大家感兴趣还可以移步结一老师的文章：rem不是神农草，治不了移动端百病。
5. 工程应用我们平时使用rem还有遇到的一大问题就是我们习惯使用px来定义样式，而px到rem是需要计算转化过程的，刚接触rem的时候你可能需要px先定义好页面布局，然后一个一个计算并替换rem单位。
当然我们有更加科学的方式来使用rem单位。
5.1 px转rem网页工具你可以前往px转rem工具，轻松一键上传你的css文件让这个网页工具帮你完成计算和替换。
5.2 mixin1、rem
输入：
代码语言：javascript复制.element {
@include rem('padding',10px 0 2px 5px);
}输出：
代码语言：javascript复制.element {
padding: 10px 0 2px 5px;
padding: 1rem 0 0.2rem 0.5rem;
}2、sass-rem
输入：
代码语言：javascript复制.demo {
font-size: rem(24px); // Simple
padding: rem(5px 10px); // Multiple values
border-bottom: rem(1px solid black); // Multiple mixed values
box-shadow: rem(0 0 2px #ccc, inset 0 0 5px #eee); // Comma-separated values
text-shadow: rem(1px 1px) #eee, rem(-1px) 0 #eee; // Alternate use
}输出：
代码语言：javascript复制.demo {
font-size: 1.5rem;
padding: 0.3125rem 0.625rem;
border-bottom: 0.0625rem solid black;
box-shadow: 0 0 0.125rem #ccc, inset 0 0 0.3125rem #eee;
text-shadow: 0.0625rem 0.0625rem #eee, -0.0625rem 0 #eee;
}5.3 构建作为工程化的今天，我们同样有大量的构建插件来帮助我们自动完成px单位到rem单位的转换过程：
fis3: fis3-postprocessor-px2remgulp stylus-px2remwebpack px-to-rem-loader
更多插件6. 更多更多内容可以参考 rem 入门精通教程_w3cplus
留个坑 - rem工程化实践细节