您现在的位置是:首页 > Javascript
当前栏目
我的Vue之旅、03 CSS响应式相对单位(em,rem,vw,vh)
2023-03-31 11:02:16 时间
REM
rem是一个相对尺寸,它相对于html根元素来进行计算
类推3REM为48px。改变html根元素 font-size 属性的大小。那么REM值也会随之改变。
html{
font-size: 50px; /* 默认 16px */
}
此时3REM为150px。接下来我们通过一个小案例来演示。f-size使用了text css类
html {
font-size: 16px;
}
.text {
font-size: 1rem;
}
修改类选择器 .text 的font-size为2rem后。可以看到f-size随之变大了。
让我们在做一次修改,可以看到 40 * 2 = 80px。
html {
font-size: 40px;
}
.text {
font-size: 2rem;
}
REM 主要应用在响应式布局网页中。什么是响应式布局?能够根据窗口大小动态变化布局的网页就是响应式。
将用到px的地方替换成rem单位。通过媒体查询Media Quires的方式改变HTML根节点 font-size 的大小。
我的Vue之旅、04 CSS媒体查询完全指南(Media Quires) - 小能日记 - 博客园 (cnblogs.com)
让我们用该篇文章的使用案例①来实现。将font-size统一改成rem单位,并修改媒体查询。
#size {
// ....
font-size: 2rem;
}
@media screen and (max-width: $desktop) {
.container {
background-color: $color-4;
}
// 新添加的
html {
font-size: 30px;
}
}
@media screen and (max-width: $laptop) {
.container {
background-color: $color-3;
}
html {
font-size: 20px;
}
}
@media screen and (max-width: $tablet) {
.container {
background-color: $color-2;
}
html {
font-size: 15px;
}
}
@media screen and (max-width : $mobile) {
.container {
background-color: $color-1;
}
html {
font-size: 10px;
}
}
改变窗口宽度,明显看到字体大小被改变。
- 电脑屏,2 rem * 30px = 60px;
- 笔记本, 2 rem * 20px = 40px;
- 平板屏,2 rem * 15px = 30px;
- 手机屏, 2 rem * 10px = 20px;
EM
EM 单元与 REM 单元相同,但它取决于父字体大小,可以理解成离它最近的font-size大小。
html {
font-size: 16px;
}
.text {
font-size: 3em;
}
html {
font-size: 16px;
}
.text {
font-size: 3em;
padding: 3em;
}
padding计算依赖离它最近的font-size大小。即 16px * 3em *em = 144px;
不推荐使用em
- 很有可能犯计算错误
- 您必须在媒体查询中编写大量代码,使网站在所有屏幕尺寸上响应
VW
视口宽度,以百分比方式工作。10vw相当于当前浏览器窗口屏幕宽度的10%。
.text {
display: none;
}
.box {
width: 50vw;
height: 300px;
}
即使我们调整浏览器窗口大小,该元素宽度始终等于屏幕宽度的50%。
VH
视口高度,以百分比方式工作。10vw相当于当前浏览器窗口屏幕高度的10%。
.text {
display: none;
}
.box {
width: 300px;
height: 50vh;
}
即使我们调整浏览器窗口大小,该元素高度始终等于屏幕高度的50%。
相关文章
- 如何保护 SpringBoot 配置文件中的敏感信息
- vue 里使用数字滚动插件 vue-count-to 时出现文本抖动?
- 昨天网站都变成灰色了,这其中是怎么实现的?
- elementUI中的el-table标签介绍
- vue的单根元素问题及解决方法
- crontab、JSON、前端、后端、通信、转换、编码、解码、表达式工具
- 好疑惑!idea启动、spring boot、无法加载或找不到主类
- 通过三种工具看一次HTTP报文交互过程
- vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式?
- 电商网站使用哪种证书比较好?
- 开源炫酷css轮播图 可直接引入html文件使用 含注释 jQuery插件
- 学习JavaScript笔记
- HTML DOM(一)——简介,元素,表单
- 【蜻蜓点水】了解一下 vite 下一代前端开发与构建工具
- 1 分钟学会 30 种编程语言
- 【蜻蜓点水】了解一下 vite 下一代前端开发与构建工具2
- 13 个关于删除/过滤 JS 数组的方法
- 如何从 0 到 1 实现一个支持排序、查找、分页的表格组件(React版)
- 分享 42 个面向前端开发的 JS 库和框架
- 分享 16 个适合做拖拽练习的前端案例