先引入一个js插件remScale.js
不知道csdn怎么上传文件，就把js代码复制在下面：自己保存一下，存到js文件里面即可，
写移动端页面时，把这个文件引入即可
这段代码的核心意思是：如果页面的宽度超过了720px，那么页面中html的font-size值恒为100px,否则的话，html中的font-size的大小为100*（当前的页面宽度/720）
我看百度上人家都是设置640px或750px，但是我们老师设置的是720px，经过实践证明，720px也可以用，没啥问题
对应手机屏幕来说，720px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。这里的px是css逻辑像素（在下面给大家补充什么是设备像素，逻辑像素，css像素）
设备像素是设备的固有属性，屏幕的设备分辨率是1920*1200（单位：设备像素）
逻辑像素也叫设备独立像素，与css像素一样是一种虚拟的像素，它是操作系统定义的一种像素单位，应用程序将逻辑像素告诉操作系统，操作系统再将逻辑像素转为设备像素。
可以通过操作系统的分辨率设置来改变设备独立像素的大小，但是在前端开发中可以当作定制，因为没人会闲着没事去频繁改变操作系统分辨率。
css像素是一个不确定的物理像素，它是根据它所在的机型设备而决定的。在css中使用的px都是指css像素，如width:200px.css像素的大小，很容易变化的。当我们**缩放页面的时候，元素的css像素数量不会改变，****改变的是每个css像素的大小，**也就是说width:200px的元素在缩放200%以后，宽度仍然是200像素，只不过每个css像素的宽度和高度变为原来的2倍。如果原来的元素宽度为200个设备独立像素，缩放后就变成400个设备独立像素了，但是css像素宽度始终是200
参考了：
响应式设计——理解设备像素、设备独立像素和css像素
设置font-size值的原因是：rem就是根元素（即html）的字体大小，html中所有标签样式只要是涉及到尺寸的（height,width,font-size,padding,margin等）都可以使用rem布局。
如果把html的font-size设为20px，前面所说rem就是html的字体大小，那么1rem就是20px。可以算出1px就是0.05rem.
那么宽60像素，高40像素的元素样式就可以设置为：
width:3rem;
height:2rem;
so,这样设置的话，要素宽55px，高37px，就得一点点计算了，是不是好麻烦。
所以：把font-size值设置为100px，是不是很爽。此时1rem=100px.
那么上面的宽55px，高37px就可以设置成
width:0.55rem;
height:0.37rem;
so，换算起来简单多了
为什么不一开始把html的font-size设为1px呢，这样换算起来也简单，答：浏览器一般都有最小字体限制，比如谷歌浏览器，最小中文字体就是12px，所以实际上没有办法让1rem=1px。）
参考了：手机端页面自适应解决方案—rem布局
最后再给大家说个vscode插件 easy less
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery