移动端适配的文章很多，自己都看晕了，特别想找一个一劳永逸的又简洁的解决方案。
设计原则：文字流式，控件弹性，图片等比缩放。字体使用px设置大小，控件多使用flex布局来定位，图片等使用rem来设置。为达成这样的效果，设置分为3步：
- 视口
viewport设置 - 使用
css媒介查询设置font-size - 使用
js设置rem
设置viewport
先加个视口适配，不加这个，布局视口宽度将变成980px(这是iphone的safari默认的，别的手机别的浏览器可能不一样)，而不是移动设备本身的视口宽度。另外也可以设置让用户可以缩放，看需求。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
设置font-size
有不少做法喜欢将html的font-size设置为100px，然后所有的单位都用rem来设置（1rem等于html的font-size），包括之后字体，比如font-size: 0.16rem。那会导致比如手机竖屏切换为横屏的时候，字体也相应的变宽了，而且小数太多也不方便，一般是希望字体大小保持不变，流式排版。所以font-size使用px做单位，用css的媒介查询根据布局视口的宽度进行设置，类似这样：
@media (min-width: 320px) {
.my-class {
font-size: 10px;
}
}
@media (min-width: 375px) {
.my-class {
font-size: 12px;
}
}
@media (min-width: 400px) {
.my-class {
font-size: 15px;
}
}
@media (min-width: 640px) {
.my-class {
font-size: 20px;
}
}
设置rem
比如现在拿到一张设计稿，宽度一般是640或750物理像素(pt)，以750为例，其CSS宽度为375px，这也是iphone6/7/8的宽度（分辨率dpr为2）。为了方便，设计body的宽度为7.5rem，尺寸使用rem，那么焦点集中在如何正确设置html的font-size，这个不能再用媒介查询设置，应该使用js。定义函数如下：
function adjustFontSize() {
document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
//也可以设置如果超过640了（iPad），就按640算，再大没意义
}
注：也可以换成给document.documentElement.style.fontSize赋值，因为document.documentElement就是根节点html。另外，
document.documentElement.clientWidth也可以换成window.innerWidth，一般是一样大，pc端有时候前者略小，因为后者包含滚动条，而后者IE不支持，但可以从<body>中获取，...深究下去没完了。
最终页面根元素html的font-size就被设置为50px了，也就是1rem的尺寸。如果要画一个120px宽的<div>，只需要设置width: 2.4rem。
将函数绑定到这三个事件上：
document.addEventListener('DOMContentLoaded', adjustFontSize(), false);
//不要使用onload，会等所有css资源什么都加载完
window.addEventListener('orientationchange', adjustFontSize(), false);
window.addEventListener('resize', adjustFontSize(), false);
可以使用getComputedStyle(document.documentElement)['font-size']来查看当前html的font-size。
效果
竖着的：
image.png
横过来：
image.png
所以，别用
rem设置字体大小，如果想固定不变就用px；如果想跟着宽度离散变化就在媒介查询里设置(推荐)；如果想连续变化就用js设置(感觉没必要)。
问题
- 好像也可以全部使用媒介查询设置，说到底
js也是根据宽度设置了font-size，可以如下设置一系列：
@media (min-width: 375px) {
html {
font-size: 50px;
}
body {
font-size: 12px;
}
}
//省略了其它常用尺寸的，比如320px 400px 640px
优点是不需要js渲染，可能性能好一些；缺点就是pc端浏览时，rem设置宽度的元素在缩放时不是连续的；
- 如果只使用媒介查询，方向变化后
min-width也自动变化了，其实可以不绑定上文window的两个事件； - 分辨率的问题，暂未细细研究，待补充。
参考了网上不少文章，主要是这篇网易和淘宝移动WEB适配方案再分析及其参考。
网友评论