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

相关推荐
咩咩啃树皮1 小时前
第40篇:Vue3组件化开发精讲——组件拆分、复用、父子通信、工程化架构
java·前端·架构
阳光是sunny1 小时前
LangGraph中的Reducer是什么
前端·人工智能·后端
触底反弹1 小时前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战
前端·css·html
阳光是sunny1 小时前
从链到图:LangGraph 入门基础全解析
前端·人工智能·后端
To_OC2 小时前
LC 42 接雨水:暴力超时卡半天?前后缀数组一用就通了
javascript·算法·leetcode
小林ixn2 小时前
从 ??= 到 onKeyDown:一个 React 组件的“自我修养”
前端·javascript·react.js
REDcker2 小时前
显示分辨率标准对照详解
前端·网络·分辨率·显示·屏幕
এ慕ོ冬℘゜3 小时前
前端实战:jQuery 多条件联合搜索(标题模糊查询 + 日历时间段筛选)
前端·javascript·jquery
武子康3 小时前
Search Console Platform Properties 扩大 SEO 资产边界:从 Page Ranking 到 Topic Coverage(5 类误读边界 + 3 表数据层设计)
前端·人工智能·后端
随心点儿3 小时前
js postMessage 实现跨域发送消息-应用示例
javascript·ecmascript·postmessage