Vue rem回顾

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue rem回顾(初学者简单笔记)

目录

rem回顾

移动端适配

等比例缩放

下载插件

总结


rem回顾

实现自适应的rem布局。

通过把屏幕划分成几个等份,作为html字体的大小,当设备变化的时候,就除去这个份数,得出当前html的字体大小,然后转换为rem单位。

移动端适配

移动端适配 根据clientWidth

等比例缩放

适配第一种方案

设置body是为了盒子不被字体撑开,如下:

在越大的设备上 就越大 (750为设计稿宽度)

动态设定fontSize 可适配所有屏幕

适配第二种方案

750px/16 = 46.875rem

200px/16 = 12.5rem

页面元素的rem值 = 页面元素值(px)/ html font-size 字体大小

下载插件

可以通过vscode安装插件,进行px和rem的换算。

可以通过settings.json修改插件默认的fontsize计算值,根据项目进行设置

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue rem回顾(初学者简单笔记)

相关推荐
程序员黑豆5 小时前
Java 注释详解:单行、多行与文档注释的完整指南
java·前端·ai编程
剪刀石头布啊5 小时前
antd中可编辑表格中巧用useWatch实现联动高性能效果,以及定制延伸学习
前端
油丶酸萝卜别吃6 小时前
前端转全栈学习路线
前端·学习
浮生望6 小时前
前端路由进阶:History API原理与手写HistoryRouter
前端
陆枫Larry7 小时前
JavaScript 中的竞态是什么,为啥会有竟态?
前端
上海安当技术9 小时前
半天接入:USBKey RESTful API + C 动态库,Web 和 C/S 两套集成路径实战
前端·后端·restful·集成·usbkey
DevUI团队9 小时前
从“即兴创作”到“规格先行”,华为云码道(CodeArts)代码智能体持续深耕企业级规范驱动开发能力
前端·人工智能·后端
weixin_4316004410 小时前
NestJS 入门(3):Guard 如何挡住未登录请求?
前端·后端·学习·nest.js
avi911110 小时前
[AI教做人]AI平台做2项目;一个3D模型展示,另一个框架多人
javascript·人工智能·ai·3d模型·3d引擎·顶点和法线
kyriewen10 小时前
我用Claude Code两天干完了团队两周的排期——周报发出去那一刻我就后悔了
前端·javascript·ai编程