移动端适配方案及不同单位区别

适配方案

将页面的宽度设置为设置的视窗宽度后，即可进行移动端适配工作了。

从适配的目的是在屏幕大小不同的终端设备拥有统一的界面，让拥有更大屏幕的终端展示更多的内容，从上面两个角度出发，核心思路是：页面内容充满整个视窗

1. rem 布局

rem 是CSS3新增的一个相对单位，它以 HTML 元素的 font-size 为比例：

/* 设置html元素的字体大小为 16px，即 1rem = 16px */
html {
    font-size: 16px;
}
/* 设置box元素宽 160px，10rem = 160px */
.box {
    width: 10rem; /* 160px */
}
复制代码

修改HTML元素的字体大小可以成比例的调整以 rem 为单位的属性，通过这一个特性，我们可以实现将视窗按一定比例划分为一份一份的，当页面内元素刚好分完所有的份数，页面内容即充满整个视窗且无横向滚动条。

以宽度750像素的设计稿为例，有两个元素，一个元素占 550 个像素，另一个占 750 个像素：

// ...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="w-550px"></div>
<div class="full"></div>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .w-550px {
        width: 550rem;
        height: 100px;
        background-color: rgb(209, 255, 240);
    }
    .full {
        width: 750rem;
        height: 100px;
        background-color: rgb(195, 200, 199);
    }
</style>
<script>
    function setRem() {
        // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改
        const scale = document.documentElement.clientWidth / 750;
        document.documentElement.style.fontSize = scale + 'px';
    }
    setRem();
    window.onresize = setRem;
</script>
复制代码

页面伸缩，网页布局也会进行伸缩。运行结果如下：

目前，除了IE8及更早版本外，所有浏览器均已支持rem。

1.1 搭配 postcss-pxtorem 搭建项目

1. 使用 vue-cli 创建项目

vue create rem-demo
复制代码

1. 设置 viewport

<!-- rem-demo/public/index.html -->
<!-- 框架已经帮我们设置了，这里可以忽略 -->
<meta name="viewport" content="width=dev