flexible

1、npm i amfe-flexible 2、import 'amfe-flexible' 然后再，安装postcss-px2rem插件 npm i postcss-px2rem 在package.json中配置 "postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem": { "remUnit": 26.7 } } } 来源： https://www.cnblogs.com/woaiqianduan/p/11762246.html

《使用Flexible实现手淘H5页面的终端适配》： https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 《再聊移动端页面的适配》： https://blog.csdn.net/qq_21729177/article/details/79466951 《如何在Vue项目中使用vw实现移动端适配》： https://www.w3cplus.com/mobile/vw-layout-in-vue.html 来源： https://www.cnblogs.com/woodk/p/11586141.html

html < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta http-equiv = " X-UA-Compatible " content = " ie=edge " > < title > test </ title > < script src = " lib/flexible_css.js,flexible.js " > </ script > < link rel = " stylesheet " href = " css/css.css " > </ head > < body > < div class = " a " > </ div > < div class = " b " > </ div > </ body > </ html > less(vscode使用easy less转换) // 设计稿宽度 单位px 如果是750 请使用375宽度的手机开发 @DesignWidth : 750 ; @BaseFontSize : @DesignWidth /10 ; // 函数式 // . rem ( width,100 ) ; . rem ( @name , @px ) { @ { name } : unit ( @px / @BaseFontSize , rem ) ; }

再聊移动端页面的适配 前端圈真乱，这话一点不假。但乱也乱的好处，乱则生变，有变化才有进步。今天还是老调重谈，聊聊移动端页面的适配。因为对于一枚前端而言，天天和页面打交道（H5页面），那么布局的活总是少不了，这也将面临不同终端的适配问题。不知道你是否和我一样，页面布局总是或多或少会有一些蛋疼的事情发生。如果是的话，建议你花点时间阅读完下面我扯蛋的东东。 Flexible承载的使命 Flexible到今天也有几年的历史了，解救了很多同学针对于H5页面布局的适配问题。而这套方案也相对而言是一个较为成熟的方案。简单的回忆一下，当初为了能让页面更好的适配各种不同的终端，通过Hack手段来根据设备的 dpr 值相应改变 <meta> 标签中 viewport 的值： 从而让页面达么缩放的效果，也变相的实现页面的适配功能。而其主要的思想有三点： 根据 dpr 的值来修改 viewport 实现 1px 的线 根据 dpr 的值来修改 html 的 font-size ，从而使用 rem 实现等比缩放 使用Hack手段用 rem 模拟 vw 特性 有关于Flexible方案实现适配，在2015年双十一之后做过这方面的技术文档分享，感兴趣的同学可以移步阅读《使用Flexible实现手淘H5页面的终端适配》一文。虽然Flexible解决了适配终端很多问题，但它并不是万能的，也不是最优秀的

简单描述 最近尝试了几个移动端的ui框架，发现vant-ui还不错； 但是有个问题，就是vant-ui单位是px，使用时需要我们自己去转换为rem； 具体实现方法 1.下载lib-flexible 使用的是vue-cli+webpack，通过npm来安装的 npm i lib - flexible -- save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签 通过meta标签，设置设备宽度以及缩放比例 < meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" > 4.安装px2rem-loader npm install px2rem - loader 5.配置px2rem-loader 这里是重要的一步~~ 在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如： const px2remLoader = { loader : 'px2rem-loader' , options : { remUnit : 75 //

vue项目中使用lib-flexible解决移动端适配的问题 第一部分：项目中引入lib-flexible 一、项目中安装lib-flexible $ npm install lib-flexible 二、查看是否安装完成 1.打开packge.json文件，找到dependencies对象，如下： "dependencies" : { "lib-flexible" : "^0.3.2" , //这就是安装成功了 "vue" : "^2.5.2" , "vue-router" : "^3.0.1" } , 三、在项目的入口main.js文件中引入lib-flexible import 'lib-flexible' 通过要以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配了。 lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem 注意： 1.检查一下html文件的head中，如果有 meta name="viewport"标签