1. 整体采用rem布局，rem基于根元素html 中font-size的值为基准值。 只要根元素中font-size值改变 那么所有已rem为单位的元素就会动态改变。 我们知道现在市面上的手机屏幕是大小不一的。 那么我们怎么设置根节点的 基准值呢？ 以前的老办法是采用媒体查询 :
|
@media screen and (max-width: 375px) { font-size:16px; }
@media screen and (max-width: 750px) { font-size:16px; }
......................... |
（媒体查询具体概念如果不知道的同学 可以百度一下，这里我就不多赘述了）
这样处理 可以解决你的适配问题，只要匹配已有的手机屏幕就行。但是这样是不灵活的。。并且你鬼知道以后的屏幕有多唬人。所以我们必须找到一种可以无论你屏幕多大都可以成功适配的方案。 （敲黑板）：
|
(function () {
function resizeBaseFontSize() {
var rootHtml = document.documentElement,
deviceWidth = rootHtml.clientWidth;
if (deviceWidth > 640) {
deviceWidth = 640;
}
rootHtml.style.fontSize = deviceWidth / 3.75 + "px";
console.log(deviceWidth / 3.75 + "px");
}
resizeBaseFontSize();
window.addEventListener("resize", resizeBaseFontSize, false);
window.addEventListener("orientationchange", resizeBaseFontSize, false);
})();
|
我们可以获取屏幕可视区域的宽度 clientWidth。然后通过事件resize 监听屏幕变化 window.addEventListener("resize", resizeBaseFontSize, false); 动态来设置 根节点 rootHtml.style.fontSize的值。
至于这里为什么除以 3.75呢？ 这个系数和你的设计稿大小有关，，如果你的设计稿宽度是375px，那么就可以除以3.75 从而获得一个px 和rem 的比例 100px = 1rem ; 一个简单的数学运算。想一下就理解了。 我们可以把这段代码放到全局引入 如果是vue项目 直接写在 app.vue 里面也是可以的。 这一步就到此为止了。
2.头部添加该标签 设置viewport
|
这个标签大概的意思是 屏幕宽度等于设备宽度：content="width=device-width， 最大和最小缩放比是1.0：initial-scale=1.0, maximum-scale=1.0 不允许用户缩放：user-scalable=0
(这个标签包含的知识点较多 如果想了解的更深入一些 可以百度一下。)
3. 前面两步基本可以满足移动端布局的要求啦 第三步就是一些细节问题了。 比如页面中尽量采用 flex布局，这样适配更好。图标采用svg的。显示更加一致。
内容分享到这里 如果有错误欢迎评论 指正。 或者有更好的想法可以一起交流