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回顾(初学者简单笔记)

相关推荐
欧阳天羲8 分钟前
交通出行大前端与 AI 融合:智能导航与出行预测
前端·人工智能·状态模式
倪旻萱2 小时前
XSS漏洞----基于Dom的xss
前端·xss
GISer_Jing6 小时前
JavaScript 中Object、Array 和 String的常用方法
开发语言·javascript·ecmascript
brzhang6 小时前
颠覆你对代码的认知:当程序和数据只剩下一棵树,能读懂这篇文章的人估计全球也不到 100 个人
前端·后端·架构
斟的是酒中桃6 小时前
基于Transformer的智能对话系统:FastAPI后端与Streamlit前端实现
前端·transformer·fastapi
烛阴7 小时前
Fract - Grid
前端·webgl
JiaLin_Denny7 小时前
React 实现人员列表多选、全选与取消全选功能
前端·react.js·人员列表选择·人员选择·人员多选全选·通讯录人员选择
brzhang7 小时前
我见过了太多做智能音箱做成智障音箱的例子了,今天我就来说说如何做意图识别
前端·后端·架构
为什么名字不能重复呢?8 小时前
Day1||Vue指令学习
前端·vue.js·学习