绝对长度单位

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

【像素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. supervisor管理php-fpm

    /etc/php-fpm.conf,设置daemonize = no,默认是yes

  2. 3.20 总结 java程序流程控制

  3. SQL 撤销索引、表以及数据库

    通过使用 DROP 语句,可以轻松地删除索引.表和数据库. SQL DROP INDEX 语句 我们可以使用 DROP INDEX 命令删除表格中的索引. 用于 Microsoft SQLJet (以 ...

  4. Putty中的pscp和psftp的简明用法

    用习惯了putty,那是真心的方便啊,putty文件夹下其他的小兄弟也不能忽略啊. 以前的时候,从远程服务器下载个文件用winscp,后来,发现在putty文件夹里好像有一个 pscp和psftp,今 ...

  5. 工具篇-Spark-Streaming获取kafka数据的两种方式(转载)

    转载自:https://blog.csdn.net/weixin_41615494/article/details/7952173 一.基于Receiver的方式 原理 Receiver从Kafka中 ...

  6. 3-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(购买域名,域名绑定IP)

    2-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(监听Wi-Fi和APP的数据) 因为安全连接是和域名绑在一块的,所以需要申请域名 有没有不知道域名是什么的, ...

  7. Winform 最小化双击显示,最小化右键退出。退出

    WinForm 之 窗口最小化到托盘及右键图标显示菜单 Form最小化是指整个Form都缩小到任务栏上,但是窗体以Form的标题栏形式显示在任务栏上, 若是想让Form以Icon的形式显示在任务栏右下 ...

  8. flask token认证

    在前后端分离的项目中,我们现在多半会使用token认证机制实现登录权限验证. token通常会给一个过期时间,这样即使token泄露了,危害期也只是在有效时间内,超过这个有效时间,token过期了,就 ...

  9. 572. Subtree of Another Tree(easy)

    Given two non-empty binary trees s and t, check whether tree t has exactly the same structure and no ...

  10. 访问网站出现 HTTP ERROR 500 该网页无法正常运作

    项目在本地环境配置好后访问出现如下图所示: 经过查看php日志文件发现问题在于数据库连接错误,如下图: 修改成本地的数据库用户名和密码,重启服务器即可正常访问.