让px单位自动转换为rem的方法

开发工具：

编辑器：vscode;

css预处理器：less;（无具体要求）；

步骤：

1. vscode安装cssrem插件；

2. 修改css插件的默认配置，其默认转换px为16px, 需要改为当前项目设计的1rem所对应的px，vscode插件的默认安装目录一般为 C:\Users\用户名\.vscode\extensions；

找到 cipchk.cssrem-0.0.3 插件，打开package.json, 修改其默认配置：cssrem.rootFontSize

3. 重启vocode,vscode的配置大功告成！

4. 引入下面的js,监听窗口大小改变：

/** * 设置根字体大小 */

var docEl = document.documentElement,  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',  recalc = function () {    if (docEl.clientWidth < 640 && docEl.clientWidth > 320) {      docEl.style.fontSize = 32 * (docEl.clientWidth / 320) + 'px';    } else if (docEl.clientWidth >= 640) {      docEl.style.fontSize = '64px';    } else if (docEl.clientWidth <= 320) {      docEl.style.fontSize = '32px';    }  };window.addEventListener(resizeEvt, recalc, false);document.addEventListener('DOMContentLoaded', recalc, false);

6. 对body标签进行设置：

body {max-width: 640px;  min-width: 320px;  font-family: Microsoft Yahei, Arial;  background: #f0f0f0;  font-size: 0.5rem;  margin: 0 auto !important;  /*滚动条卡顿*/  -webkit-overflow-scrolling: touch;  overflow-scrolling: touch;}

转载于:https://www.cnblogs.com/minimissile/p/8064987.html

让px单位自动转换为rem的方法相关推荐

vue 自动px单位自动转换rem
vue 自动px单位自动转换rem vue 适配移动端假设设计图是750 第一步安装 lib-flexible npm i lib-flexible --save 第二步 px2rem-loade ...
Vue自动px单位自动转换rem
上期说到使用 lib-flexible + postcss-px2rem-exclude 实现px 转 rem,但是发现实现的结果是错误的,宽度根本不够,查看各种资料了解到,现在已经不使用了,现在使用 ...
vue中将px单位转成rem
方法一: px2rem-loader + lbi-felix(这种方法可能会导致第三方UI库样式缩小): 1.首先安装需要用到的包 npm install px2rem px2rem-loader l ...
前端怎么把px单位换成rem单位解决项目页面适配问题
先看没有适配前的效果,下面是没有适配前,使用的是px单位,代码和效果如下: <!DOCTYPE html> <html><head><meta charset ...
使用postcss-plugin-px2rem和postcss-pxtorem(postcss-px2rem)-px自动转换rem的配置方法-vue-cli3.0
在vue-cli3.0中使用postcss-plugin-px2rem 插件插件的作用是自动将vue项目中的px转换为rem postcss-plugin-px2rem优势: 因为 postcs ...
vscode怎么自动将px转换成vw_基于react/vue移动端适配之px自动转rem、vw
作为一名前端开发,在做移动端适配时rem.vw是我们经常用到的单位,但是我们在实际开发过程中需要将设计稿上的px转换成rem,如果手动去计算,将是一个很耗时.费力的过程.这是就需要一个工具可以帮我们自 ...
css自动转rem,css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了. 但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程 ...
html页面如何按需导入vant,vue脚手架中使用Vant，实现自动按需引入组件，并将px转换为rem...
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
html分辨率的适配方法,pc端px转换为rem针对屏幕分辨率进行页面适配
常用的pc端网站适配方案是什么?用的最多的大概就是父元素按照设计图的宽度进行固定宽度,margin:0 auto居中,两边留白.但是有的设计图不适合这样两边留白的适配方案. 最近接手了一个pc端的项目 ...
在html中2em是多少px,在css设置单位px、em、rem哪个更好？
浏览器最终渲染出的页面是以具体的像素为单位的(因为显示器的显示原理是基于像素的啊),浏览器通过计算em和rem,最终再将这些相对单位转换为具体的像素值渲染出来.这三者可以这样理解: px是绝对单位,独 ...

让px单位自动转换为rem的方法

让px单位自动转换为rem的方法相关推荐

最新文章

热门文章