运行打开index.html,得到页面展示 postcss转rem 下载依赖 yarn add -D postcss postcss-loader postcss-pxtorem webpack.config.js // loader注意事项:从后往前执行 { test: /\.css$/, use: [ // 省略代码 "postcss-loader", ], } postcss.config.js module.exports = { plugins: { "postcss-pxtorem...
它会去拿内置的file去跟exclude去做对比,对比上了就过滤,那么file返回的是个字符串,也可以通过indexOf去做判断exclude支持function,但是,这个file在Mac和window返回的路径格式不一样,导致匹配不上。 Mac:aa/bb/cc.html Win:aa\bb\cc.html 导致做这块开发的同学用的是Mac他不知道Win有问题,所以后面有WIn的开发时...
amfe-flexible amfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10。 二、使用: 1、设置viewport,在index.html中加入下面代码: <meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 如图: 设置viewport截图 2、安装插件: ...
'postcss-pxtorem': { rootValue: 16,//结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem propList: ['*'] } } } 3. main.js 添加对根元素字体的大小设置,来达到适配多倍图的效果 function setRem() { // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16 const htmlWidth...
// 设置 rem 函数functionsetRem(){// 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16lethtmlWidth=document.documentElement.clientWidth||document.body.clientWidth;//得到html的Dom元素lethtmlDom=document.getElementsByTagName('html')[0];//设置根元素字体大小htmlDom.style.fontSize=htmlWidth/20...
在使用 postcss-pxtorem 进行响应式布局时,需要注意 HTML 的字体大小设置。如果需要在移动端和 PC 端之间切换单位,则可以通过浏览器识别特定媒体查询的方式来实现。postcss-pxtorem 还支持排除不需要转换的类名或选择器,以及排除某些文件或目录。 除了上述内容,下面我们再来介绍一些与 postcss-pxtorem 相关的内容。 一...
postcss-pxtorem:转换px为rem的插件。 vant:移动端ui组件。 postcss-pxtorem 是将px转化为rem的一个插件,rem单位是根据根节点字体大小,设置根节点大小,动态改变rem大小,从而实现适配不同大小的终端设备。 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通过设置根节点的字体大小可以动态的...
因为刚修改vue.config.js，要让他生效，需要重新运行项目，\因为rem的原理就是根据根组件html来计算尺寸，所以为了验证这个是否安装，我可以打开项目运行后的浏览器，F12，然后先手动设置html的字体大小：于是页面尺寸：二，配套使用rem.js从上文可以知道，rem单位是以html的font-size作为基准实现页面尺寸...
public/index.html下 <script> const baseSize = 100 // 基准值 function setRem() { // 相对于1920像素的缩放比 let scale = document.documentElement.clientWidth / 1920 // 根据屏幕变化 1rem 对应的 font-size scale = scale > 1 ? 1 : scale; ...
使用的是vue-cli+webpack,通过npm来安装的 npm i postcss-px2rem lib-flexible --save-dev 或者 yarn add postcss-px2rem lib-flexible 1 2 3 2.引入lib-flexible 在main.js中引入lib-flexible //导入rem 的 js,动态的设置了不同屏幕的html根元素的 font-size import "lib-flexible" ...