Css单位px,rem,em,vw,vh的区别
Css单位px,rem,em,vw,vh的区别
- px 像素
- rem 根元素字体大小
- 应用场景
- 使用和修改
- em 相对于父元素的大小
- % 相对长度单位
- vw、vh 相对于视口的单位
- 视口
- VW 相对于视口宽的1%
- vh 相对于视口高的1%
px 像素
像素,为影像显示的基本单位,译自英文“pixel”,pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel,故“像素”表示“画像元素”之意,有时亦被称为pel(picture element)。每个像素可有各自的颜色值,可采三原色显示,因而又分成红、绿、蓝三种子像素(RGB色域),或者青、品红、黄和黑(CMYK色域,印刷行业以及打印机中常见)。
简单来说,像素是一个 相对单位 ,不同于厘米这种任意物品都通用的尺寸。像素根据展示媒介的不同而大小不同。
例如我的电脑尺寸
宽1920个像素点,高1080个像素点
ps:想查看自己电脑的显示是多少像素可以使用
window+R
输入dxdiag回车运行
在显示的那一栏下可以找到
rem 根元素字体大小
它的全称是 font size of the root element (根元素的字体大小)
它是CSS3中新增加的一个尺寸(度量)单位,根节点(html)的font-size决定了rem的尺寸,也就是说它是一个相对单位,相对于(html)。
应用场景
可以用来做web app的屏幕适配
使用和修改
将根元素html的font-size设置为20px,此时box的宽高都为20px,也就是1rem = 20px
em 相对于父元素的大小
- 子元素字体大小的em是相对于父元素字体大小
- 元素的width/height/padding/margin用em的话是相对于该元素的font-size
% 相对长度单位
百分比是一个相对长度单位,相对于包含块(containing block)的高宽或字体大小。
关于包含块(containing block)的概念,不能简单地理解成是父元素。
如果是静态定位和相对定位,包含块一般就是其父元素。
如果是绝对定位的元素,包含块应该是离它最近的 position为非static属性的祖先元素。
如果是固定定位的元素,它的包含块是视口(viewport)。
vw、vh 相对于视口的单位
视口
在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端较为复杂,它涉及到三个视口:分别是 Layout Viewport(布局视口)、 Visual Viewport(视觉视口)、Ideal Viewport。 而视口单位中的“视口”,在桌面端,毫无疑问指的就是浏览器的可视区域;但是在移动端,它指的则是三个 Viewport 中的 Layout Viewport 。
pc端:浏览器的可视区域
移动端:Layout Viewport
VW 相对于视口宽的1%
vh 相对于视口高的1%
Css单位px,rem,em,vw,vh的区别相关推荐
- CSS单位 px pt em和rem 之间的区别
CSS中可以定义大小的单位有四种px,pt,em,rem,而px可以说在网页开发中最常见的单位了.不过现在如今的大多数网站已经开始用rem这个单位了.那么这四个单位有什么区别呢? px|pt|em|r ...
- 深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
- 弄清楚CSS单位px、em、rem、vh、vw、vmin、vmax的应用场景
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
- 区别css单位px、em、rem
在对页面进行自适应时,查阅相关资料了解到,通常有两种方式将px转换为em或者rem,下面就上述三者之间的联系进行讲解: em与px转换 一般浏览器默认1em=16px,通过设置font-size大小来 ...
- CSS单位px、em、rem及它们之间的换算关系
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址
- CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
一.px(像素) [绝对单位,页面按精确像素展示] px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率. px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不 ...
- css中的单位换算_CSS单位px、em、rem及它们之间的换算关系
作者:WangMin 格言:努力做好自己喜欢的每一件事 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者的区别与优势是什么?接下来我们就来学习一下吧! 单位px.em.rem分 ...
- 移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位 当前市面上用的比较多 相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
- css中px、em和rem的区别总结
前言 em 和 rem 都是灵活可扩展的单位,由浏览器转换为像素值,取决于设计中的字体大小,如果使用值 1em 或 1rem ,它可以被浏览器转换为从 16px 到 160px 或其他任意值.浏览器使 ...
最新文章
- BZOJ3230 相似子串 字符串 SA ST表
- (原) Data Blocks, Extents, and Segments
- php 获取网卡mac
- 9种排序算法在四种数据分布下的速度比较
- nginx 根证书 服务器证书,Nginx双向证书校验(服务器验证客户端证书)
- php 取前一天时间戳,php获取时间今日明天昨天时间戳
- Java SE 基础知识(一)
- 四种引用类型(强引用、软引用、弱引用、虚引用)的简单介绍
- powershell 停止正在运行的用户应用
- 用计算机名怎么共享电视盒,机顶盒怎么通过电脑实现局域网共享
- mysql数据库索引回表_简述 MySQL 数据库的覆盖索引与回表
- php 替换 数组,php如何替换数组的值
- You must install libks to build mod_signalwire
- cvHoughLines2() 霍夫线变换
- javase实现银行转账
- NodeJS + WebStorm 中文显示乱码
- 深度揭秘:诺基亚的百年沧桑
- 信息系统分析与设计(第四版)期末复习提纲
- 最易难学习的编程语言榜单出炉,C++最难学?
- OutMan——Foundation框架中的NSString类和NSMutableString类
热门文章
- win7 iis php5.3,win7 下安装 iis7.5+php5.3的配置方法(图文)
- java 文件名乱码_详解关于java文件下载文件名乱码问题解决方案
- Linux 笔记 :FHS目录笔记
- ViT (Vision Transformer) ---- Seq2Seq
- mysql命令行导入dmp文件,oracle的备份文件(dmp)导入mysql数据库方法
- 如何将zipoutputstream返回_嫦娥五号返回器要“跳”一下再回地球!这一“跳”大有讲究...
- java代码读写者问题_一整套Java线上故障排查技巧,爱了!
- 清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码
- SharePoint 2010 客户端对象模型使用 ECMAScript
- 3D开发-AR.js 自定义Marker