日常开发中px单位自动转换为rem的方法
2023-06-13 09:18:40 时间
开发工具: vscode css预处理器: less
1. vscode安装cssrem插件
https://qmblog.qmzm.co/2021/11/wz01-1-2-1.png
2. 修改css插件的默认配置
其默认转换px为16px, 需要改为当前项目设计的1rem所对应的px,vscode插件的默认安装目录一般为 C:Users用户名.vscodeextensions; 找到 cipchk.cssrem-0.0.3 插件,打开package.json, 修改其默认配置:cssrem.rootFontSize
https://qmblog.qmzm.co/2021/11/wz02-2-1.png
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);
5. 对body标签进行设置:
body {
max - width: 640 px;
min - width: 320 px;
font - family: Microsoft Yahei, Arial;
background: #f0f0f0;
font - size: 0.5 rem;
margin: 0 auto!important;
/*滚动条卡顿*/
-
webkit - overflow - scrolling: touch;
overflow - scrolling: touch;
}
相关文章
- java jsonobject 转换_java – 将JSONObject转换为JSONArray
- vue格式化时间戳_日期格式转换
- 使用postcss-plugin-px2rem和postcss-pxtorem(postcss-px2rem)-px自动转换rem的配置方法-vue-cli3.0
- SQL 开发知识:SqlServer将查询结果转换为XML和JSON
- SQL Server纵表与横表相互转换的方法
- Mongodb 如何将时间戳转换为年月日日期
- json对象和字符串的相互转换详解编程语言
- Python时间,日期,时间戳之间转换,时间转换时间戳,Python时间戳转换时间,Python时间转换时间戳详解编程语言
- Linux中将整形转换为字符串的方法(linux整形转字符串)
- 换Oracle 脚本转换:轻松实现数据库迁移(oracle脚本转)
- Oracle 将数据转换为日期格式(oracle转换为日期)
- Oracle数据库大写转换为小写的方法(oracle大写转小写)
- 串MSSQL转换日期为字符串的方法(mssql日期转字符)
- MySQL映射:简单方法转换关系数据库和对象模型(mysql映射)
- Oracle字符类型转换技巧大全,如何实现快速高效的字符类型转换方法?详解实用的转换语句及技巧,一文搞定Oracle字符类型转换!(oracle字符类型转换)
- 从MySQL到MSSQL:如何转换?(mysql转换mssql)
- 字符Oracle中将数字转换为字符的方法(oracle中转数字)
- Oracle从中文到英文的转换(oracle 中英文转换)
- Oracle中将窄表转换为宽表的方法(oracle中窄表变宽表)
- 转换Oracle中如何实现大小写转换(oracle中大小写)
- Oracle中构建哈希值变换技术(oracle中哈希值转换)
- javascript浏览器判断绑定事件arguments转换数组数组遍历
- sqlserver2005行列转换实现方法
- php表单转换textarea换行符的方法