一文搞懂CSS中的字体单位大小(px,em,rem...) |
您所在的位置：网站首页 › 屏幕尺寸单位 › 一文搞懂CSS中的字体单位大小(px,em,rem...) |
一文搞懂CSS中的字体单位大小(px,em,rem...)
|
前言
在学习的过程中,发现CSS有很多可以描述单位的尺寸。比如px,em,rem,vw等等。平时也没有深究，一来是没时间，二来是在我学习清单中优先级过低。一直想彻底弄明白，一直耽搁到现在。现在花上一点时间来整理一下，彻底弄懂它。 CSS长度单位 绝对长度单位。 绝对长度单位表示为一个固定的值，不会改变。不利于页面渲染。 in,英寸 cm, 里面 mm, 毫米 pt pc 相对长度单位。 其长度单位会随着它的参考值的变化而变化。 px,像素 em,元素的字体高度 %,百分比 rem,根元素的font-size vm,视窗宽度，1vw=视窗宽度的1% vh,视窗高度，1vh=视窗高度的1% 物理像素(设备像素)比如有一个图片，细分，最小单位就是像素。也就是说，图片由许多的像素构成。像素是小方块，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。 也叫做解析度，解像度。可以从显示分辨率与图像分辨率两个方向来分类。 屏幕分辨率。是屏幕图像的精密度，是指显示器所能显示的像素有多少，即显示器可以可以显示的小方块有多少个。 显示器的可显示的小方块越多，画面就越精细，同样的屏幕区域内能显示的信息也越多 可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。棋盘的小方块越多，可以放的棋子就越多。 显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。(小方块一样多的情况下，显示屏越小越清晰；屏幕大小一样大的时候，小方块越多图形越清晰) CSS像素pxCSS像素的单位也叫做px。它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。所以在谈论像素时一定要清楚它的上下文！ 为了保证阅读体验一致，CSS可以自动在不同设备之间可以调节。即一份代码可以在不同的大小的设备之间显示，并且可以保证阅读体验一致。 默认情况下一个CSS像素应该是等于一个物理像素的宽度。 但是在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。比如iPhone的屏幕对比一般的手机屏幕会看起来更精细清晰一些。 在浏览器上通过ctrl +/-可以扩大缩小屏幕，其实就是屏幕分辩率的调低/调高。ctrl +屏幕放大，分辨率降低。 iPhone6,7,8都是两倍屏手机，即一个CSS像素等于2物理像素。iPhone6Plus等是三倍屏手机，一个CSS像素等于3物理像素。 以iPhone6为例，设计稿给出一个图片宽高为40*40。在实际开发中要除以2，宽高要写成20x20。因为iPhone6是两倍屏手机。 emem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸,浏览器字体默认为16px。 所以，1em = 16px。默认情况下。 如何高效使用em呢 body里声明font-size:62.5%。即全局声明1em = 16px * 62.5% = 10px 之后可以把em当做px使用。当然此时，1em = 10px 如果在父容器里说明了font-size:20px,那么在子容器里的1em就等于20px。 remrem单位是相对于字体大小的html元素，也称为根元素。 html { font-size: 10px; /* 不建议设置 font-size: 62.5%; 在 IE 9-11 上有偏差，具体表现为 1rem = 9.93px。 */ } .sqaure { width: 5rem; /* 50px */ height: 5rem; /* 50px */ } em与rem rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小。 em最多取到小数点的后三位 html{ font-size: 20px; } body{ font-size: 1.4rem; /* 1rem = 28px */ padding: 0.7rem; /* 0.7rem = 14px */ } div{ padding: 1em; /* 1em = 28px */ } span{ font-size:1rem; /* 1rem = 20px */ padding: 0.9em; /* 1em = 18px */ }上面的例子中，发现了一个有意思的情况。em 会层层继承父元素的字体大小，很容易造成字体大小的混乱。所以以后用rem会更好。 rpxrpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。 无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px = 1物理像素。 前端开发中像素的概念 最全的CSS尺寸单位介绍 CSS3中常见的单位 移动设备分辨率（终于弄懂了为什么移动端设计稿总是640px和750px） 几个CSS的单位你需要了解一下 我的博客欢迎访问我的博客，会分享一些技术文章，一起学习前端。 |
【本文地址】
今日新闻 |
推荐新闻 |