移动端适配解决方案flexible.js事故的起点总是有原因的，那么想想，为什么要使用Flexible呢？[]用于rem布局？>>为什么要rem布局——>高度还原[]移动端适配？>>移动端适配为什么要用Flexible——>等比[]什么是移动端适配？首当其冲的就是设计图的高度还原！！！基于750*1334（iPhone6）的设计稿，预计真机iPhone6上各设计元素的比例和长宽比与设计稿一致。一组代码想扩展到其他设备，所以出现了rem布局[]Flexible是做什么的[]什么是rem[]如何恢复设计图的高度在
标签中引入flexible.js*.html引入flexible.js会做以下内容：向*.html添加内联样式表只是为了重置一些样式，并通过属性selector区分不同设置rate下的style主要是监听resize和pageshow事件重??新设置html.style.fontSize和设置body.style.fontSize定义全局变量window.lib.flexiblewindow.lib.flexible={dpr:number,refreshRem:function,rem2px:function,px2rem:function}注意：HTML中不需要设置meta#viewport，flexible.js会根据需要自动添加meta#viewportwindow.devicePixelRatio的值。假设设置如下
，不管设备数量dpr，flexible.js不再修改元数据配置，会强制dpr为你设置的值。注意：在Flexible中，dpr只针对iOS设备进行判断。对于Android系列，它的dpr总是被认为是1。对于Android系列，它的dpr总是被认为是1？深入flexible.js的实现，body#width是根据devicePixelRatio进行缩放的。对于iOS设备，它恰好是缩放后其视觉视口的大小。Android系列手头的机测，在不缩放的情况下，body#width正好是其视觉视口的大小。body#width/dpr>540?如果body#width/dpr>540，比如PC端body#width>1080，Flexible会被当成1080。通过scss定义px2rem的转换~不使用自动化工具，不能使用下面的处理方式，可以只能自己计算赋值了~@functionpx2rem($px,$base-font-size:16px){@if(unitless($px)){@warn"假设#{$px}以像素为单位，试图为您将其转换为像素”；@returnpx2rem($px+0px);//这可能会失败。}@elseif(unit($px)==rem){@return$px;}@return($px/$base-font-size)*1rem;}原理：通过以上步骤，能否还原设计图的高度？本质上是设计元素的逐年转换。flexible.js将body#width分成100份，一份作为基准，设置为html#fontStyle，而px2rem将设计组件以*%的比例转化为设计图，使用rem作为中介，显示在设备上有相同的比率比较。这样就可以实现设计图的高度还原。但是计算出来的结果可能不是有效值，所以浏览器的显示优化...比如：小于12px的字体，浮点数的精度...文本字号不建议使用rem.我们希望在同一个dpr屏幕下，文字字体大小是一样的我们希望在大屏手机上看到更多的文字，我们不希望看到13px和15px等怪异的大小。在不使用自动化工具的基础上，不能使用以下处理方式，数值只能自己计算~@mixinfont-dpr($font-size){font-size:$font-size;[data-dpr="2"]&{字体大小：$字体大小*2;}[data-dpr="3"]&{字体大小：$字体大小*3；}}@includefont-dpr(16px);补充知识点flexible.js使用document.readyStateAPI获取文档的加载状态event}elseif(event.target.readyState==='complete'){//表示加载状态的事件即将被触发。//相当于加载}});Vue项目实战~项目由@vue/cli@4.5.13创建~手机适配引入flexible安装lib-flexiblenpmi-Dlib-flexible项目引入flexible#main.jsimport"lib-flexible/flexible";注意：如果在HTML模板的中直接引用，执行的优先级会更高。样式px自动转移到rem安装postcss-plugin-px2remnpmi-Dpostcss-plugin-px2rem创建.postcssrc.js#.postcssrc.jsmodule.exports={plugins:{'postcss-plugin-px2rem':{rootValue:108,//转换基数，设计尺寸，默认100exclude:/(node_module)/,//默认为false，可以(reg)使用正则表达式排除某些文件夹，例如/(node_module)\/mediaQuery:false,//（布尔值）允许在媒体查询中转换px。minPixelValue:3,//设置要替换的最小像素值（3px会被转为rem）。默认0}}}也有例外。如果不想转换rem，单位使用全大写PX，如font#presets.scss$largeFont:40PX;$中间字体：20PX；$标准字体：14PX；$smallFont:10PX;@mixinfont-dpr($font){字体大小：$font;[data-dpr="2"]&{字体大小：$font*2;}[data-dpr="3"]&{字体大小：$font*3;}#example.scss...@import"../../assets/scss/preset";.page-title{@includefont-dpr($standardFont);}...标准提交记录下面命令@vu??e/cli会自动安装commitlint插件并更新pkgvueaddcommitlintswiper应用安装依赖npminstallswipervue-awesome-swiper--saveglobalregistration#main.js...从“vue-awesome-swiper”导入VueAwesomeSwiper；导入“swiper/swiper.scss”；Vue.use(VueAwesomeSwiper,{});...逻辑应用程序#Example.vueSlide{{i}}
点击滑动style#example.scss.swiper{&-{&container{高度：100%;}&slide{高度：100%；白颜色;}}}按钮{位置：绝对；z-指数：100；底部：20PX；宽度：100%；文本对齐：居中；}非标准字体非标准字体是指在系统设置中人为调整字体大小(function(){var$dom=document.createElement("div");$dom.style="font-size:20px;";document.body.appendChild($dom);//计算放大后的字体varscaledFontSize=parseInt(window.getComputedStyle($dom,null).getPropertyValue("font-size"));document.body.removeChild($dom);//计算原始字体和放大字体的比例varscaleFactor=20/scaledFontSize;//取html元素的字体大小//注意这个大小也进行了缩放//所以下面计算的时候，*scaledFontSize就是原来的html字体大小//同样*scaledFontSize就是我们要设置的大小varoriginRootFontSize=parseInt(window.getComputedStyle(document.documentElement,null).getPropertyValue("font-size"));document.documentElement.style.fontSize=originRootFontSize*scaleFactor*scaleFactor+"px";alert(parseInt(窗口.getComputedStyledocument.documentElement,null).getPropertyValue("字体大小")));})();在上面的章节中，我们说了【不推荐】字号使用rem，但是使用px是因为我们想让不同设备像素比的设备更准确最大限度的利用显示空间：一行显示更多的文字在大屏幕上，小屏幕上显示的文字较少。考虑到非标准字体，如果字号使用px，即使通过上述方法调整了html的基础字号，也不会影响字体的显示。因此，在考虑非标准字体时，需要使用rem来设置字号。Pad适配既然Pad流行了，就要考虑适配Pad了。Flexible不考虑Pads的适配，但是我们可以做一些适配的修改。Flexible不考虑Pad，通过修改varisIPhone=win.navigator.appVersion.match(/iphone|iPad/gi);AdjustFlexible对设备有最大尺寸限制，只需将其移除functionrefreshRem(){varwidth=docEl.getBoundingClientRect().width;//if(width/dpr>540){//宽度=540*dpr;//}varrem=宽度/10;docEl.style.fontSize=rem+'px';灵活的。rem=win.rem=rem;}px2rem的媒体查询配置删除postcss-plugin-px2rem插件及其配置custompxtoremfunction--formediaquery//#px2rem.scss$defaultFontSize:108;@functionpx2rem($px,$baseFontSize:$defaultFontSize){@return$px/$baseFontSize*1rem;}.main{宽度：px2rem(540);@mediascreenand(min-width:450px){width:px2rem(1660,166);}}参考文档阿里移动端知识储备Flexible官方文档viewport介绍1viewport介绍2iphone12适配swiper相关配置非标准字体
