刚看了一篇真正教会你开发移动端页面的文章(二)，文章写的很清楚，现总结下他的核心思想及自己所查阅的一些资料：
假设设计稿是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页面的终端适配
作者：该帐号已被查封
链接：https://www.jianshu.com/p/dffa036d7595
共同学习，写下你的评论
评论加载中...
作者其他优质文章
