日常开发中px单位自动转换为rem的方法
2023-03-07 09:44: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;
}
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的