基础知识了解：物理像素：物理像素也叫设备像素，是显示设备中最微小的物理组成部分。每个像素都可以根据操作系统设置自己的颜色和亮度。正是这些设备像素之间的微小距离让我们的眼睛看到了图像的样子。Device-independentpixels：也称为密度无关像素，可以认为是计算机坐标系中的一个点，它代表一个可以被程序使用的虚拟像素（比如CSS像素），然后转换成一个相关系统的物理像素。Devicepixelratio：简称dpr，定义了物理像素和设备无关像素的对应关系。它的值可以按照这个公式计算：设备像素比=物理像素/设备独立像素（Android一般为：1；iPhone为2或3）visualviewport：可见视口，即屏幕的宽度；layoutviewport：布局视口，即DOM宽度；idea视口：理想可口，让布局视口为可见视口；devicewidth（视觉视口）和DOM宽度（layoutviewport）的关系，scale为：（视觉视口）=（layoutviewport）*scale得到屏幕宽度的大小：window.innerWidth/Height得到DOM的大小width:document.documentElement.clientWidth/Height视口的meta标签initial-scale:'Set页面初始缩放值，为数字，可以带小数'；maximum-scale:'用户允许的最大缩放值，是一个数字，可以有小数';user-scalable:'是否允许用户缩放，值为"no"或"yes"，no表示不允许，yes表示允许';flexible.js：手机淘宝团队流行的适配方案源码分析：//首先是一个立即执行函数，执行时传入的参数是window和document(functionflexible(window,document){vardocEl=document.documentElement//返回文档的根元素vardpr=window.devicePixelRatio||1//获取设备的dpr，即当前设置下物理像素与虚拟像素的比例//调整body标签的fontSize,fontSize=(12*dpr)+'px'//设置默认字体大小，默认字体大小继承自body函数setBodyFontSize(){if(document.body){document.body.style.fontSize=(12*dpr)+'px'}else{document.addEventListener('DOMContentLoaded',setBodyFontSize)}}setBodyFontSize();//set1rem=viewWidth/10//设置根元素的fontSize=ItsclientWidth/10+'px'functionsetRemUnit(){varrem=docEl.clientWidth/10docEl.style.fontSize=rem+'px'}setRemUnit()//当我们的页面大小发生变化时，我们需要重新设置rem的大小window.addEventListener('resize',setRemUnit)//pageshow是重新加载页面触发的事件window.addEventListener('pageshow',function(e){//e.persisted返回true，也就是说如果从缓存中取出页面，还需要重新计算rem的大小if(e.persisted){setRemUnit()}})//检测是否支持0.5px，如果支持，根元素的类中有细线if(dpr>=2){varfakeBody=document.createElement('body')vartestElement=document.createElement('div')testElement.style.border='.5pxsolidtransparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if(testElement.offsetHeight===1){docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}}(window,document))不想看原理的可以直接看这里使用它的步骤。1.在index.html文件中使用CDN导入flexible.js文件//参考地址页面下面不要设置meta标签，Flexible会自动设置每个屏幕宽度的根font-size，动态视口，以及Retina屏幕的dpr。//不要设置这个标签！！！2.将视觉稿中的px转为rem一般UI给我们的稿件尺寸为750，以此为例：在flexible.js中，将750px分成10份，1rem即为75px。所以font-size的参考值为75px；css转rem的公式为：px值/75=rem，例如：100px=100/75=1.33rem，但是这样计算非常复杂。那么我们在日常开发中如何快速计算呢，这里说一下我常用的编译器VScode，它有一个插件叫cssrem，可以在我们输入px值后自动转换rem。安装方法如下：①：安装插件②：修改配置参数。当设计图为750时，填写75rootfont-size（单位：px），默认：16，表示根字体大小，默认为16px，即1rem=16px，我们这里改成75.cssrem.fixedDigitspx到rem小数点最大长度，默认：6。③：修改参数后，我们只需要进入px值插件即可自动计算rem值，效果如下图所示：最后，最近看了很多这方面的博客文章，而我就是结合大家写的文章，跟着他们转了好几圈，试验了很多方法才搞定。如有错误，希望大家帮我指出，谢谢！
