rem的使用会转化为一个如何让根素的字体大小动态变化问题?/*dpi*//*for1080+pxwidthscreen*//*for1080pxwidthscreen*//*对于800像素宽度的屏幕*//*对于800像素宽度的屏幕*/@mediaonlyscreenand(min-width:751px){html,body{font-size:31.25px;}}/*对于800像素宽度的屏幕*/@mediaonlyscreenand(max-width:750px){html,body{font-size:31.25px;}}/*对于720px宽度的屏幕*/@mediaonlyscreenand(max-width:720px){html,body{font-size:30px;}}/*对于640px宽度的屏幕*/@mediaonlyscreenand(max-width:640px){html,body{font-size:27px;}}/*对于540像素宽度的屏幕*/@mediaonlyscreenand(max-width:540px){html,body{font-size:22.5px;}}/*对于480像素宽度的屏幕*/@mediaonlyscreenand(max-width:480px){html,body{font-size:20px;}}/*对于450像素宽度的屏幕*/@mediaonlyscreenand(max-width:450px){html,body{font-size:18.9px;}}/*对于414px宽度的屏幕*/@mediaonlyscreenand(max-width:414px){html,body{字体大小:17.25px;}}/*对于375像素宽度的屏幕*/@mediaonlyscreenand(max-width:375px){html,body{font-size:15.625px;}}/*对于320像素宽度的屏幕*/@mediaonlyscreenand(max-width:320px){html,body{font-size:13.5px;@media可以为不同的屏幕尺寸设置不同的样式，特别是如果你需要设计响应式页面，@media非常有用。当你重新设置浏览器尺寸时，页面也会根据浏览器的宽度和高度重新渲染页面。其实我看到这里这个概念还不是很清楚，而且mediaquery中包含了很多关键字，所以我们经常使用andnotonlykeywords来防止老浏览器不支持带有media属性的query并应用到给定的styleand关键字用于组合多个媒体属性或组合媒体属性和媒体类型。not关键字应用于整个媒体查询，并在媒体查询为假时返回真。举个简单的例子：/mediaquery支持的最大宽度为320px。应用如下CSShtmlbody的fontsize设置为13.5px/@mediaonlyscreenand(max-width:320px){html,body{font-size:13.5px;}}移动端页面适配解决方案——rem布局只需要放在页面上引入这段原生js代码就可以了?'orientationchange':'resize',//视口变化事件，获取手机屏幕是否翻转sourcerecalc=function(){//重置方法varclientWidth=docEl.clientWidth;if(!clientWidth)return;//改变DOM根节点的fontSize大小的值;//(屏幕宽度/设计图宽度)=缩放或展开比例;if(clientWidth>=640){docEl.style.fontSize='100px';}else{docEl.style.fontSize=100*(clientWidth/640)+'px';}};if(!doc.addEventListener）返回；win.addEventListener(resizeEvt,recalc,false);doc.addEventListener('DOMContentLoaded',recalc,false);})(文件,窗口);如何使用？这是rem布局的核心代码。这段代码的主要思想是：如果页面的宽度超过640px，那么页面中html的font-size始终为100px，否则，页面中html的font-size为：100*（当前页面宽度/640）为什么是640px？为什么是640px？对于手机屏幕来说，640px的页面宽度是一个安全的最大宽度，可以保证手机页面两边不会出现空白。注意这里的px是CSS逻辑像素，不同于设备的物理像素。例如iPhone5采用Retina视网膜屏，用2pxx2px的设备像素表示1pxx1px的css像素，所以设备像素数为640x1136px，其CSS逻辑像素数为320x568像素。如果要对移动端页面进行裁剪，可以先将渲染的宽度缩放到640px，这个非常好用。为什么要设置html的字体大小？rem是根元素（即：html）的字体大小。对于html中所有涉及大小的标签样式（如：height,width,padding,margin,font-size.even,left,top等），可以放心大胆的使用rem作为单位。设计图一般为640px，相当于100px=1rem，方便计算；因为是640px，页面的大小应该是有限的，所以最外面的框应该是：position:relative；宽度：100%；max-width:640px;min-width:320px;margin:0auto;高清方案源码'usestrict';/***@param{Boolean}[normal=false]-启用页面压缩默认使页面高清；*@param{Number}[baseFontSize=100]-基本字体大小，默认100px；*@param{Number}[fontscale=1]-部分商家希望将字体放大一定比例；*/constwin=window;exportdefaultwin.flex=(normal,baseFontSize,fontscale)=>{const_baseFontSize=baseFontSize||复制代码100；const_fontscale=fontscale||1;constdoc=win.document;constua=navigator.userAgent;constmatches=ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);constUCversion=ua.match(/U3\/((\d+|\.){5,})/i);constisUCHd=UCversion&&parseInt(UCversion[1].split('.').join(''),10)>=80;constisIos=navigator.appVersion.match(/(iphone|ipad|ipod)/gi);让dpr=win.devicePixelRatio||1;如果(!isIos&&!(匹配&&匹配[1]>534)&&!isUCHd){//如果非iOS,非Android4.3以上,非UC内核,就不能执行高清,dpr设置为1;dpr=1;}constscale=正常？1：1/dpr；让metaEl=doc.querySelector('meta[name="viewport"]');如果(!metaEl){metaEl=doc.createElement('meta');metaEl.setAttribute('名称','视口');doc.head.appendChild(metaEl);}metaEl.setAttribute('content',`width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);doc.documentElement.style.fontSize=正常？'50px':`${_baseFontSize/2*dpr*_fontscale}px`;};参考：https://www.jianshu.com/c/f904ec54e871
