CSS尺寸单位px、em、rem、vw、vh以及%的区别
1. px
px
是像素单位。它是代表显示器上每一个显示的像素点,根据用户屏幕显示器的分辨率决定。
2. em
em
为相对单位,相对于当前元素内文本的字体尺寸。如果当前元素没有指定字体尺寸,那么以浏览器默认的字体尺寸为准。
例如,当前元素设置了字体尺寸为24px
,那么2em
就代表48px
。
3. rem
rem
为相对单位,相对于<HTML>
元素文本的字体尺寸。如果<HTML>
元素没有指定字体尺寸,那么以浏览器默认的字体尺寸为准。
例如,<HTML>
元素设置了字体尺寸为24px
,那么2rem
就代表48px
。
4. vw和vh
vw
和vh
是相对单位,相对于当前视口。
例如,10vw
代表当前视口宽度的10%
,20vh
代表当前视口高度的20%
。
5. %
%
是相对单位,相对于父元素的相关尺寸。
例如,父元素设置了height: 100px
,那么它的子元素height: 50%
就代表50px
。
CSS尺寸单位px、em、rem、vw、vh以及%的区别相关推荐
- 【前端基础】整理常见的单位 px em rem % vw vh vmin vmax rpx
基本单位 单位 计算方式 简介 px 标准像素 优点兼容性最好,缺点没有弹性,对于过大过小屏幕显示效果不好 em font-size元素大小 1em等于font-size的大小(font-size默认 ...
- CSS中的常见单位(px,%,em,rem,vw,vh,vmax,vmin,calc)
像素(px)&百分比(%) 像素(Pixel) 长度单位,相对于显示器屏幕分辨率而言,通常在不定义显示缩放比例的情况下,1px对应显示器屏幕上的一个像素点. 早年的pc端展示的页面基本都用这个 ...
- css px em rem % vw vh vm 区别
前言 在传统项目开发中,我们只会用到 px.%.em 这几个单位长度,它们可以适用大部分项目的开发,并且拥有较好的兼容性. 而从 css3 开始,浏览器对逻辑单位的支持又提升了新的境界,增加了 rem ...
- css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
- web开发之长度单位:px, pt, rem, vw, vh
在前端开发中,常常会碰到各种长度单位,比如 px, em, rem, vw 等. 总的来说,可以把这些长度单位分成两类:绝对长度单位 和 相对长度单位. 绝对长度单位 绝对长度单位是一个固定的值,一个 ...
- html移动端怎么做城市选择,移动端页面单位的选择(px, em, rem, vw)
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
- CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
- px,em,rem,vw单位在网页和移动端的应用
px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...
最新文章
- 可信计算 沈昌祥_沈昌祥院士在南宁开展网络安全前沿知识讲座
- 微盟616零售购物节观察:私域流量增值是社交生态的真实价值
- linux变量转义,关于linux:在Bash变量中转义awk参数
- yum出错Error: Cannot find a valid baseurl for repo: base
- 查询oracle表上重复的数据库,如何确定Oracle数据库表重复的记录
- Android Activity类讲解(一)
- 覆盖所有面试知识点,持续更新中
- 清除浮动(采用BFC)
- 必须声明标量变量是什么意思_机器视觉学习之halcon系列---一文带你理解handle变量是什么意思...
- 跨站脚本攻击基础 ——合天网安实验室学习笔记
- MIPI 系列之 DSI
- 【Python】三维画图——matplotlib以及np.mgrid的使用
- Ecowalker充气足球门,为青少年足球训练保驾护航!
- 计算机哪里找产品密钥,计算机windows的密钥在哪里可以找到?
- pycharm如何恢复工具的主菜单
- android imageview stretchblt,想知道Bmp图像的缩小放大用Tcanvas.StretchDraw还是用StretchBlt函数?(50分)...
- 对付木马:空手入白刃谁动了我的电脑系统(转)
- ubuntu18.04 network有线网络图标缺失解决记录
- 安装Ubuntu Linux操作系统
- python相关参考文献_[编程]Python数据分析
热门文章
- 如何用好示波器?资深工程师也会忽略这些细节……
- 王者荣耀购买装备----笔记
- 搜狗输入法中文状态下,打出来还是英文按住键盘Ctrl+shift+E就可以了
- Linux I2C驱动
- idm下载器(Internet Download Manager)
- 界面组件——按钮(Button)与图片按钮(ImageButton)
- 解决SQLServer复制到Excel中内容换行问题
- STM32 Mbed系列-ADC参考电压设置
- 什么是蓝牙(Bluetooth)
- Java毕业设计 JSP+MySQL幼儿园信息管理系统