rem 是CSS3新增的一个相对单位（root em，根em）。这个单位与em区别在于使用rem为元素设 定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

将以下代码放在入口文件，即可使字体大小自适应屏幕大小

function resize() {
  let doc = document.documentElement   //返回文档的根节点
  let width = doc.clientWidth  //获取浏览器窗口文档显示区域的宽度，不包括滚动条
  let ratio = width / 375  //将屏幕分为375份（当屏幕为375px时，ratio=1px）
  let fontSize = 10 * ratio //乘10，（当屏幕为375px时，fontSize=10px）
  if (fontSize > 20) fontSize = 20  //当屏幕为大于等于750px时，fontSize均等于20px
  doc.style.fontSize = fontSize + 'px' //加上单位
// 监听resize事件，调整窗口大小，感受rem的作用，这里只考虑竖屏的情况
window.onresize = resize   //window.onresize监听div和屏幕的改变
resize() //调用函数修改fontSize的值（1rem=fontSize）
                                    之前写过一篇移动端适配的文章，很长，内容太多，看得容易凌乱，重新写个通熟易懂版的。
为什么要自适应？
比如，对于一个移动端页面，设计师给的视觉稿画布宽 750，视觉稿中的一个黄色区块的尺寸是 702 x 300，并在画板中居中。我们希望在任何一个设备中的呈现比例都与视觉稿中一样，根据布局视口宽度等比缩放。
在移动端我们一般会设置布局视口宽度=设备宽度，即内容呈现的区域在设备屏幕内。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
但不同设备的宽度不同，因而让布局视口的宽度也不同。比如 iPhone
                                    可以根据设计稿宽度设置，获取到当前屏幕font-size大小，设置到蓝湖上，直接转换为rem进行布局即可。1rem的大小是通过html下的根字体大小（font-size）这个css属性告诉浏览器的。比如 ： 设置html当前font-size = 10px；那么1rem = 10px;（假如设计稿宽度是750），有一个预设的rem和px的比例。（假如是425px），那么他此时1rem的尺寸。2.获取用户浏览器的可视区域的宽度。（假如是1rem = 10px）
                                    css中添加屏幕自适应方法(rem)只需要在公共css文件中添加下面代码：设计稿以750px，基础字体为20px为例，兼容性高，使用过程中px转化为rem即可/*竖屏*/@media screen and (max-aspect-ratio: /){html {font-size:calc(100vw /  * );}@media screen and (min-width: 750px) {ht...
                                    思考1. 页面布局文字能否随着屏幕大小变化而变化？2. 流式布局和flex布局主要针对于宽度布局，那高度如何设置？3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？
		<meta charset="UTF-8">
		<title>css适配</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,max...
响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。
当我们每天面对缤纷的互联网世界的时候，文字不仅仅传递给我们众多的信息资讯，而且在设计师的手里，文字在网页中的排版承载着一种艺术的直觉。
网页中常用的文字大小单位是 px(Pixels)，em，现在新增了 rem 这个单位。
一、那...
自适应区别于响应式布局最大的优点是可以适应视口宽度为任意大小的设备。
2、什么是rem
rem是相对于根元素也就是html的字体大小单位，容易与em混淆，em指的是相对于父元素的字体大小，如果需要做自适应，那么应当使用rem做全局处理，而不是使用em。
3、什么是rem基准值
rem基准值就是rem与px之间的换算关系，个人习惯上喜欢设置为1rem=100px,在配置文档中设置好基准值之后，输入px单位会自动提示转换为rem单位。
4、rem的计算公式 ：设备视口宽度 / 设计稿宽度 *
什么是rem？
rem是个低调的css单位，手淘在移动端的布局是基于rem处理的，当然还要基于viewport的处理，这里暂且不表。rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px =
                                    Vue 大屏开发自适应 VScode | flexible.js | rem | echarts自适配
其实开发大屏这个适配是最费劲的，电脑的分辨率，电脑缩放比例，电脑浏览器缩放比例都很麻烦，当然了，大屏界面本来就对分辨率有些许的要求，太差劲的分辨率本来就不适用，因为毕竟要保持页面放得下，不能出现滚动条，不能遮挡啥的，我这边给的设计图是1920*1080的，所以保证在这个分辨率下面，只要附近的分辨率和缩放不出问题就差不多了。
然后，我就从网上找了个大神的博客，抄了一下，感觉还行，啊哈哈哈哈，转载一下，自己学
                                    function page() {
//通过navigator判断是否是移动设备
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|...