刚看了一篇真正教会你开发移动端页面的文章(二)，文章写的很清楚，现总结下他的核心思想及自己所查阅的一些资料：
假设设计稿是iPhone6（iPhone6设备像素为750px；设备像素比为2，即其适口尺寸为375px）上有200px的方块box：
一、关于普通元素尺寸：
（一）、box的大小无论在什么设备下大小都是固定的
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="" />
<style>
body{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
</script>
</body>
</html>
（二）、box的大小随着屏幕的宽度大小变化而按比例变化（方法一）
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="" />
<style>
body{
margin: 0;
padding: 0;
}
.box{
width: 2.6666667rem;
/* 200 (box设计的宽度) / 75(设备像素宽度的十分之一)= 2.6666667 */
height: 2.66666667rem;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
</script>
</body>
</html>
注：document.documentElement.clientWidth 为布局视口尺寸，iPhone5为320px，iPhone6为375px；
当然如果设计稿是iPhone5（设计稿的宽度为640px），则1rem 为64px，那么box宽高应该为200/64=3.125rem
这种方法我们可以看到需要一些换算过程，也许你会觉得繁琐，其实不然，我们可以借助less来完成，例如：
// 例如: .px2rem(height, 200);
.px2rem(@name, @px){
@{name}: @px / 75 * 1rem;
}
因此，对于200px 的宽高，我们可以这样写：
.px2rem(width, 200);
.px2rem(height, 200);
在iPhone6下 HTML就会转换成
.px2rem(width, 2.6666667 rem);
.px2rem(height, 2.6666667 rem);
因此不需要我们自己亲自计算。
（三）、box的大小随着屏幕的宽度大小变化而按比例变化（方法二）
对于iPhone6的设计稿来说（设计稿总宽度尺寸为750px），先设置html的font-size为100px；（也就是1rem），这样总宽度为7.5rem，我们就以页面总宽7.5rem为基准，对于iPhone6的适口宽度（375px）来说，我们可以设置font-size为375/7.5=50px；对于iPhone5的适口宽度（320px）来说，我们可以设置font-size为320/7.5=42.6666667px；也就是document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
因此对于设计稿中的200px宽高，我们直接使用200px/100px=2 也就是2rem即可，无论在什么设备下，都会等比例缩放；
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<style>
body{
margin: 0;
padding: 0;
}
.box{
width: 2rem;
height: 2rem;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
</script>
</body>
</html>
当然，这是对于iPhone6的设计稿来说的，如果对于iPhone5的设计稿（总宽为640px），我们可以同样采用先设置html的font-size为100px，这样总宽度为6.4rem，200px的box则为2rem， 对于iPhone5的适口宽度来说，我们可以设置font-size为320px/6.4=50px（200px的box还是为2rem即100px）；
对于iPhone6的适口宽度来说，我们可以设置font-size为375/6.4=58.59375px（200px的box还是为2rem即117.1875px）；
因此可将上面的代码中的document.documentElement.style.fontSize部分改为
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px'; 即可；
相关文章： 动态rem简单示例
相关插件：gulp-postcss、postcss-pxtorem 、gulp-posthtml、posthtml-postcss、postcss-pxtorem
二、关于字体尺寸
对于字体，不建议使用rem单位而是采用媒体查询；
例如：
@media screen and (max-width: 321px) {
body {
font-size:16px
}
}
@media screen and (min-width: 321px) and (max-width:400px) {
body {
font-size:17px
}
}
@media screen and (min-width: 400px) {
body {
font-size:19px
}
}
扩展资料：
1、移动端高清、多屏适配方案
2、移动端适配方案(下)
3、使用Flexible实现手淘H5页面的终端适配
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
