绝对长度单位

绝对长度单位代表一个物理测量

【像素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;
}

可以放大缩小屏幕的尺寸,进行观察,vh会自动铺面一屏的高度

【vmin】

布局视口高度和宽度之间的最小值的 1/100

/*类似于contain效果*/
.box{
height: 100vmin;
width: 100vmin;
}

vmin

【vmax】

布局视口高度和宽度之间的最大值的 1/100

/*类似于cover效果*/
.box{
height: 100vmax;
width: 100vmax;
}

vmax

css长度单位学习(em,rem,px,vw,vh)的更多相关文章

  1. HTML-移动端-rem px vw vh 的转换

    vw/vh rem px 三者的转换(快速入门移动端页面编写) 1:三种单位的转换 2:如何适配移动端的不同设备 前提知识: 手机端的长宽是实际设计过程中的两倍 比如手机端是 750 * 1200 那 ...

  2. CSS系列:长度单位&字体大小的关系em rem px

    em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=1 ...

  3. 学习CSS了解单位em和px的区别

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  4. em,rem,px的实际应用

    看了好多的文章,就只是在看他们的换算,没有实际做出例子所以一直很疑惑,不知道到底是怎么写的.今天写了一个demo.务必彻底弄清楚. 先说三者的区别: 首先是我们常见的px. px: em:相对长度单位 ...

  5. 网页CSS font-size使用em替代px

    px和em都是长度单位,区别是,px的值是固定的,em的值是相对的,并且em会继承父级元素的字体大小. 任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px ...

  6. em,rem,px的区别,以及实现原理?

    px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.em是相对长度单位.相对于当前对象内文本的字体尺寸举个例子:比如说当前容器`font-size:16px;`则`1em`就 ...

  7. (转)CSS字体大小: em与px、pt、百分比之间的对比

    CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...

  8. CSS字体大小: em与px、pt、百分比之间的对比

      CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的 ...

  9. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

随机推荐

  1. LeetCode算法题-Relative Ranks(Java实现)

    这是悦乐书的第248次更新,第261篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第115题(顺位题号是506).根据N名运动员的得分,找到他们的相对等级和得分最高的三个 ...

  2. 产品设计-后台管理权限设计RBAC

    最近在做OA系统,设计到不同的员工会拥有不同权限对OA进行操作,总结了一下整体的设计 做权限的分配就是为了更好的管理不同类别的员工,如人事部可以看到普通员工的薪酬,可以查看全部员工的考勤数据请假等,而 ...

  3. 关于使用国内dock仓库,网易、DaoCloud

    使用国内docker镜像仓库,大大提高镜像的下载速度,从docker hub下载慢的不要不要的,甚至根本下载不了镜像,在docker for windows 18.06中增加一个配置即可,非常简单,具 ...

  4. yum makecache

    $ yum makecache 就是把服务器的包信息下载到本地电脑缓存起来,makecache建立一个缓存,以后用install时就在缓存中搜索,提高了速度.配合yum -C search xxx使用 ...

  5. fliplr函数

    fliplr  左右翻转矩阵 语法: B = fliplr(A) 将矩阵A的列绕垂直轴进行左右翻转 matabc 如果A是一个行向量,fliplr(A)将A中元素的顺序进行翻转. 如果A是一个列向量, ...

  6. Elastic Stack-Elasticsearch使用介绍(一)

    一.前言     Elasticsearch对外提供RESTful API,下面的演示我们主要使用Postman,进行一系列的Demo演示,这款工具方便各位前端大大或者对接口调试的神器: 安装过于简单 ...

  7. HTML/CSS 速写神器 Emmet语法

    Emmet 是高效.快速编写 HTML 和 CSS 代码的一种插件,如果还不了解,请戳Emmet — the essential toolkit for web-developers,再根据你使用的编 ...

  8. js判断数组中有没有指定元素

    list.findIndex(target => target.sel === 指定元素) ,如果找到返回下标,如果没有返回-1

  9. 转:Flutter动画二

    1. 介绍 本文会从代码层面去介绍Flutter动画,因此不会涉及到Flutter动画的具体使用. 1.1 Animation库 Flutter的animation库只依赖两个库,Dart库以及phy ...

  10. 部署alinode监控线上应用

    参考: https://segmentfault.com/a/1190000013089124