CSS的px、em、rem、%、vw、vh、vm 单位区别
1.px
px
就是像素,也是我们现在经常使用的基本单位,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。
2.em
em
参考物是父元素的font-size
,默认字体大小是16px,所以1em不是固定值,因为它会继承父元素的字体大小
3.rem
rem
参考物是相对于根元素,我们在使用时可以在根元素设置一个参考值即可,相对于em使用,减少很大运算工作量,例:html
大小为10px,12rem就是120px
4.%
% 是相对于父元素的大小设定的比率,position:absolute;
的元素是相对于已经定位的父元素,position:fixed;
的元素是相对可视窗口
5.vm
vm相对于视口的宽度。视口被均分为100单位
h1 {font-size: 8vw;
}再举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px
6.vh
vm相对于视口的宽度。视口被均分为100单位
h1 {font-size: 8vh;
}css3新单位,viewpoint height的缩写,视窗高度,1vh等于视窗高度的1%。
举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。
7.vw
css3新单位,viewpoint width的缩写,视窗宽度,1vw等于视窗宽度的1%。
举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
https://juejin.cn/post/6844903849153527815
CSS的px、em、rem、%、vw、vh、vm 单位区别相关推荐
- css px em rem % vw vh vm 区别
前言 在传统项目开发中,我们只会用到 px.%.em 这几个单位长度,它们可以适用大部分项目的开发,并且拥有较好的兼容性. 而从 css3 开始,浏览器对逻辑单位的支持又提升了新的境界,增加了 rem ...
- CSS中的常见单位(px,%,em,rem,vw,vh,vmax,vmin,calc)
像素(px)&百分比(%) 像素(Pixel) 长度单位,相对于显示器屏幕分辨率而言,通常在不定义显示缩放比例的情况下,1px对应显示器屏幕上的一个像素点. 早年的pc端展示的页面基本都用这个 ...
- 【前端基础】整理常见的单位 px em rem % vw vh vmin vmax rpx
基本单位 单位 计算方式 简介 px 标准像素 优点兼容性最好,缺点没有弹性,对于过大过小屏幕显示效果不好 em font-size元素大小 1em等于font-size的大小(font-size默认 ...
- css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...
- web开发之长度单位:px, pt, rem, vw, vh
在前端开发中,常常会碰到各种长度单位,比如 px, em, rem, vw 等. 总的来说,可以把这些长度单位分成两类:绝对长度单位 和 相对长度单位. 绝对长度单位 绝对长度单位是一个固定的值,一个 ...
- 认识css长度单位 px % em rem vh vw
目录 长度单位 px % em rem vh.vw 总结 长度单位 在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
- html移动端怎么做城市选择,移动端页面单位的选择(px, em, rem, vw)
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
- px,em,rem,vw单位在网页和移动端的应用
px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
最新文章
- 【杂谈】如何学会看arxiv.org才能不错过自己研究领域的最新论文?
- 服务端支持的session
- 手机能打开的表白代码_数据分析移动化:打开手机就能做分析
- 第3章 Python 数字图像处理(DIP) - 灰度变换与空间滤波13 - 平滑低通滤波器 -盒式滤波器核
- .NET+Sqlite如何支持加密
- Windows7下无法安装Oracle11.1.0问题
- android键盘输出增加按键码
- 记录.NET Core部署到Linux之.NET Core环境搭建(1)
- graphpad多条不同的曲线_GraphPad绘制几种常见散点图教程
- EasyRecovery2022版支持电脑, 硬盘, U盘, 内存卡, 回收站等设备数据恢复
- 计算机网络flash实训报告,flash动画实训总结精选 .doc
- 转帖:在北京5年艰辛快乐的创业经历
- Pyramidal RoR for Image Classification
- 创意简约中国风新年快乐牛年大吉通用PPT模板
- 项目二-成员函数、友元函数和一般函数之区别
- 如何将word一键导入PPT并对内容格式批量修改
- java 正则表达式匹配冒号_java 获取冒号后面的参数(正则)实现代码
- java pdf添加文字水印(非常专业)
- es like and or_广东生态所孙蔚旻团队ESamp;T发表利用稳定同位素示踪宏基因组分箱联用技术揭示砷污染土壤中的厌氧砷氧化微生物及其代谢途径...
- PHP网页毕业答辩常见问题,电子毕业设计(论文)答辩常见问题解答
热门文章
- 03_TF2 Guide、文档清单(数据输入、估计器、保存模型、加速器、性能调优等)、TF2库和扩展库(TensorBoard、数据集、TensorFlow Hub、概率和统计分析库、图像处理库)
- 22 Python IO、打印到屏幕、读取键盘输入、打开和关闭文件、文件定位、重命名和删除文件、Python里的目录、文件,目录相关的方法
- 日期操作类DateUtils
- 关于js校验,检验常见的比如:电话,数字,邮箱,手机号等等
- 5进程间锁:进程间pthread_mutex,文件锁
- 内存四域,变量声明和定义,寄存器,c内嵌汇编,auto,堆栈,常量,静态变量
- android:textAppearance设置文字外观
- java执行shell命令
- 4.14Python数据处理篇之Matplotlib系列(十四)---动态图的绘制
- echarts - 使用echarts过程中遇到的问题(pending...)