css长度单位学习(em,rem,px,vw,vh)
绝对长度单位
绝对长度单位代表一个物理测量
【像素px(pixels)】
像素,为影像显示的基本单位,译自英文“pixel”,pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel,故“像素”表示“画像元素”之意,有时亦被称为pel(picture element)。每个这样的消息元素不是一个点或者一个方块,而是一个抽象的取样。仔细处理的话,一幅影像中的像素可以在任何尺度上看起来都不像分离的点或者方块;但是在很多情况下,它们采用点或者方块显示。每个像素可有各自的颜色值,可采三原色显示,因而又分成红、绿、蓝三种子像素(RGB色域),或者青、品红、黄和黑(CMYK色域,印刷行业以及打印机中常见)。照片是一个个取样点的集合,在影像没有经过不正确的/有损的压缩或相机镜头合适的前提下,单位面积内的像素越多代表分辨率越高,所显示的影像就会接近于真实物体。
在web上,像素px是典型的度量单位,很多其他长度单位直接映射成像素。最终,他们被按照像素处理
【英寸in(inches)】
1in = 2.54cm = 96px
【厘米cm(centimeters)】
1cm = 10mm = 96px/2.54 = 37.8px
【毫米mm(millimeters)】
1mm = 0.1cm = 3.78px
【1/4毫米q(quarter-millimeters)】
1q = 1/4mm = 0.945px
【点pt(points)】
点(英语:point,pt),也音译磅因、磅,是印刷所使用的长度单位,用于表示字型的大小,也用于余白(字距、行距)等其他版面构成要素的长度。
1pt = 1/72in = =0.0139in = 1/722.54cm = 1/7296px = 1.33px
【派卡pc(picas)】
派卡(英语:pica)是印刷行业使用的长度单位。
1pc = 12pt = 1/6in = 1/6*96px = 16px
字体相关相对长度单位
em、ex、ch、rem是字体相关的相对长度单位
【em】[重点]
em表示元素的font-size属性的计算值,如果用于font-size属性本身,相对于父元素的font-size;若用于其他属性,相对于本身元素的font-size
<style>
.box{font-size: 20px;}
.in{
/* 相对于父元素,所以2*20px=40px */
font-size: 2em;
/* 相对于本身元素,所以5*40px=200px */
height: 5em;
/* 10*40px=400px */
width: 10em;
background-color: lightblue;
}
</style>
【rem】
rem是相对于根元素html的font-size属性的计算值
兼容性: IE8-不支持
<style>
/* 浏览器默认字体大小为16px,则2*16=32px,所以根元素字体大小为32px */
html{font-size: 2rem;}
/* 2*32=64px */
.box{font-size: 2rem;}
.in{
/* 1*32=32px */
font-size: 1rem;
/* 1*32=32px */
border-left: 1rem solid black;
/* 4*32=128px */
height: 4rem;
/* 6*32=192px */
width: 6rem;
background-color: lightblue;
}
</style>
默认地,浏览器的字体大小font-size是16px,也就是1rem=16px。而如果将HTML的font-size设置为100px,方便后续计算,不设置为10px是因为chrome下最小字体大小为12px
【ex】
ex是指所用字体中小写x的高度。但不同字体x的高度可能不同。实际上,很多浏览器取em值一半作为ex值
[注意]ex在实际中常用于微调
【ch】
ch与ex类似,被定义为数字0的宽度。当无法确定数字0宽度时,取em值的一半作为ch值
兼容性: IE8-不支持
[注意]ch在实际中主要用于盲文排版
视口相关相对长度单位
关于视口相关的单位有vh、vw、vmin、vmax4个单位
兼容性:IE8-不支持,IOS7.1-不支持,android4.3-不支持(对于vmax,所有IE浏览器都不支持)
[注意]黑莓错误的将其相对于视觉视口来计算;而safari奇怪地相对于html元素来计算,如果html中增加了内容,这两个单位也会发生变化
【vw】【vh】
布局视口宽度的 1/100
布局视口高度的 1/100
<style>
body{margin: 0;}
.vhbox{
/* 实现与屏幕等高的效果 */
height: 100vh;
background-color: lightblue;
}
</style>
body{margin: 0;}
.vhbox{
/* 实现与屏幕等高的效果 */
height: 100vh;
background-color: lightblue;
}
【vmin】
布局视口高度和宽度之间的最小值的 1/100
/*类似于contain效果*/
.box{
height: 100vmin;
width: 100vmin;
}
【vmax】
布局视口高度和宽度之间的最大值的 1/100
/*类似于cover效果*/
.box{
height: 100vmax;
width: 100vmax;
}
css长度单位学习(em,rem,px,vw,vh)的更多相关文章
- HTML-移动端-rem px vw vh 的转换
vw/vh rem px 三者的转换(快速入门移动端页面编写) 1:三种单位的转换 2:如何适配移动端的不同设备 前提知识: 手机端的长宽是实际设计过程中的两倍 比如手机端是 750 * 1200 那 ...
- CSS系列:长度单位&字体大小的关系em rem px
em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=1 ...
- 学习CSS了解单位em和px的区别
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
- em,rem,px的实际应用
看了好多的文章,就只是在看他们的换算,没有实际做出例子所以一直很疑惑,不知道到底是怎么写的.今天写了一个demo.务必彻底弄清楚. 先说三者的区别: 首先是我们常见的px. px: em:相对长度单位 ...
- 网页CSS font-size使用em替代px
px和em都是长度单位,区别是,px的值是固定的,em的值是相对的,并且em会继承父级元素的字体大小. 任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px ...
- em,rem,px的区别,以及实现原理?
px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.em是相对长度单位.相对于当前对象内文本的字体尺寸举个例子:比如说当前容器`font-size:16px;`则`1em`就 ...
- (转)CSS字体大小: em与px、pt、百分比之间的对比
CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...
- CSS字体大小: em与px、pt、百分比之间的对比
CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的 ...
- 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)
原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...
随机推荐
- Hexo自定义页面的方法
原文转自:http://refined-x.com/2017/07/10/Hexo%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%9 ...
- LVS+Keepalived实现mysql的负载均衡
1 初识LVS:Linux Virtual Server 1.1 LVS是什么 LVS是Linux Virtual Server的简称,也就是Linux虚拟服务器, 是一个由章文嵩博士发起 ...
- jquery 选择器、筛选器、事件绑定与事件委派
一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...
- day4-python基础-数据类型
今日份小技巧 a =3 b=4, 最快将a和b值替换的方法为 a,b =b,a 今日内容 1. 字典 2. 集合 3.hash 4.基本数据类型总结 5.循环之for循环 6.range的使用 7.深 ...
- 20175229许钰玮 2018-2019-2《Java程序设计》结对编程项目-四则运算 第一周 阶段性总结
20175229许钰玮 2018-2019-2<Java程序设计>结对编程项目-四则运算 第一周 阶段性总结 需求分析 自动生成四则运算题目(加.减.乘.除). 既可以用前缀算法(波兰算法 ...
- mac 版 Pycharm 激活
mac 版 Pycharm 激活 获取注册码地址: http://idea.lanyus.com 输入注册码之后可能会报 this license XXXXXXXX has been cancel ...
- C# 之 static的用法详解
有的东西你天天在用,但未必就代表你真正了解它,正如我之前所了解的 static . 一.静态类 静态类与非静态类的重要区别在于静态类不能实例化,也就是说,不能使用 new 关键字创建静态类类型的变量. ...
- Python Revisited (变量)
目录 = 浅拷贝 深拷贝` 函数的默认参数为可变类型时 危险 全局变量与临时变量 global 在函数里面进行复制 再看一个例子 numpy里的bug? 待续 @ 首先,需要指出的是,Python的变 ...
- Merge Sort(Java)
public static void main(String[] args) { Scanner input = new Scanner(System.in); int n = input.nextI ...
- webpack+vue 组件间传参(单一事件中心管理组件通信--$root),如果有路由的话会失效
先给一个例子: <body> <div id="box"> <com-a></com-a> <com-b></co ...