html 字号和像素的关系,一文搞懂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%
物理像素(设施像素)
比方有一个图片,细分,最小单位就是像素。也就是说,图片由许多的像素构成。像素是小方块,这些小方块都有一个明确的位置和被分配的色彩数值,小方格颜色和位置就决定该图像所呈现出来的样子。
一个设施生产出来,它们的像素就已经确定了。iPhone5的分辨率是640x1136px,代表屏幕由640行,1136列像素小方块组成。为了了解像素和避免与CSS像素混淆,可以将物理像素当做物理小方块。比方iPhone5的像素是640X1136px,可以当做640*1136个小方块。web前台开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯
分辨率
也叫做解析度,解像度。可以从显示分辨率与图像分辨率两个方向来分类。屏幕分辨率。是屏幕图像的精密度,是指显示器所能显示的像素有多少,即显示器可以可以显示的小方块有多少个。显示器的可显示的小方块越多,画面就越精细,同样的屏幕区域内能显示的信息也越多
可以把整个图像想象成是一个大型的棋盘,而分辨率的表示方式就是所有经线和纬线交叉点的数目。棋盘的小方块越多,可以放的棋子就越多。
显示分辨率肯定的情况下,显示屏越小图像越清晰,反之,显示屏大小固定时,显示分辨率越高图像越清晰。(小方块一样多的情况下,显示屏越小越清晰;屏幕大小一样大的时候,小方块越多图形越清晰)
CSS像素px
CSS像素的单位也叫做px。它是图像显示的基本单元,既不是一个确定的物理量,也不是一个点或者者小方块,而是一个笼统概念。所以在谈论像素时肯定要清楚它的上下文!为了保证阅读体验一致,CSS可以自动在不同设施之间可以调节。即一份代码可以在不同的大小的设施之间显示,并且可以保证阅读体验一致。
默认情况下一个CSS像素应该是等于一个物理像素的宽度。
但是在高PPI的设施上,CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。比方iPhone的屏幕比照一般的手机屏幕会看起来更精细清晰少量。
在浏览器上通过ctrl +/-可以扩大缩小屏幕,其实就是屏幕分辩率的调低/调高。ctrl +屏幕放大,分辨率降低。
iPhone6,7,8都是两倍屏手机,即一个CSS像素等于2物理像素。iPhone6Plus等是三倍屏手机,一个CSS像素等于3物理像素。
以iPhone6为例,设计稿给出一个图片宽高为40*40。在实际开发中要除以2,宽高要写成20x20。由于iPhone6是两倍屏手机。
em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,浏览器字体默认为16px。所以,1em = 16px。默认情况下。
如何高效使用em呢body里公告font-size:62.5%。即全局公告1em = 16px * 62.5% = 10px
之后可以把em当做px使用。当然此时,1em = 10px
假如在父容器里说明了font-size:20px,那么在子容器里的1em就等于20px。
rem
rem单位是相对于字体大小的html元素,也称为根元素。html { font-size: 10px; /* 不建议设置 font-size: 62.5%; 在 IE 9-11 上有偏差,具体体现为 1rem = 9.93px。 */}.sqaure { width: 5rem; /* 50px */ height: 5rem; /* 50px */}
em与remrem是相对于根元素(html)的字体大小,而em是相对于其父元素的字体大小。
em最多取到小数点的后三位
上面的例子中,发现了一个有意思的情况。em 会层层继承父元素的字体大小,很容易造成字体大小的混乱。所以以后用rem会更好。
rpx
rpx 是微信小程序处理自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。
无论是在iPhone6上面还是其余机型上面都是750rpx的屏幕宽度,拿iPhone6来讲,屏幕宽度为375px,把它分为750rpx后, 1rpx = 0.5px = 1物理像素。
vw 和 vhvw,视窗宽度,1vw=视窗宽度的1%
vh,视窗高度,1vh=视窗高度的1%
假如浏览器的高是900px,1vh求得的值为9px。同理,假如显示窗口宽度为750px,1vw求得的值为7.5px。
vmin 和 vmaxvmin和vmax是相对于视口的高度和宽度两者之间的最小值或者最大值。
浏览器的高为1100px、宽为700px,那么1vmin就是7px,1vmax就是11px
浏览器的高为800px,宽为1080px,那么1vmin也是8px,1vmax也是10.8px
vmin取宽度高度两者更小者/100
vmax取宽度高度两者更大者/100
哪些地方可以用到一个总是在屏幕上可见的元素。使用高度和宽度设置为低于100的vmin值将可以实现这个效果。
一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边).box { height: 100vmax; width: 100vmax;}
html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)相关推荐
- 一文搞懂css中精灵图如何使用
文章目录 前言 一.精灵图是什么? 1.概念: 2.图片示例: 二.为什么使用精灵图? 1.用户体验而言: 2.就开发者而言: 3.就服务器而言: 三.怎样使用精灵图 1.background-pos ...
- 一文搞懂Qt中的颜色渐变(QGradient Class)
一文搞懂Qt中的颜色渐变(QGradient Class) 1, 快速开始! Qt中与颜色渐变有关的类是QGradient 其中它又有三个子类:QLinearGradient.QRadialGradi ...
- 一文搞懂产品中的搜索设计
搜索功能是我们日常生活中接触最多的功能之一,它更够很好的提高用户使用产品的效率,用户对搜索功能的依赖性也比较大,所以设计好搜索功能将会很大程度上提高用户体验.本文作者通过分享这篇文章,帮我们搞懂产品中 ...
- 【精选】一文搞懂css三大特性
文章目录 前言 一.css的三大特性都有什么? 二.盒子模型 1.盒子属性 ①盒子边框border ②盒子边角border-radius ③盒子阴影 box-shadow 2.内边距padding 3 ...
- 一文搞懂 SLAM 中的Extension Kalman Filter 算法编程
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
- 一文搞懂css 2D动画效果
文章目录 前言 一.过渡动画效果简述 transition: 1.代码示例 2.效果展示 二.定位translate 1.2D定位 transform: translate(50%, 50%); ①. ...
- 一文搞懂lib中physical cell
目录 概述 1.BHD 2.TIEH, TIEL 3.BOUNDARY 4.TAPCELL 5.ANTENNA 6.FILL 7.BUFT 概述 正常的一个工艺库包括了以下几种类型的cell func ...
- 一文搞懂matplotlib中的颜色设置
欢迎关注"生信修炼手册"! 在matplotlib中,颜色设置有以下多种方式 1. 常用颜色的字母表示及缩写 最常用的颜色表示方法,有以下几种常用颜色 1. red,表示红色, ...
- 一文搞懂SQL中的各种联结——内联结、自然联结、自联结、交叉联结
一.概述 所谓" 联结 "指的是数据表和本身,以及不同数据表之间的" 联结关系 ".常见的联结有自连接.自然连接.内连接.外联结.完全连接等等.本文以SQLit ...
最新文章
- 今天决定写一篇LNMP的深入调优,
- zookeeper的ZAB协议学习
- ES6 异步编程之二:Promise
- iOS开发之Objective-C与JavaScript的交互
- [高精度乘法]BZOJ 1754 [Usaco2005 qua]Bull Math
- linux子线程运行的函数_Linux中线程使用详解
- 加快Vue项目的开发速度
- CentOS 6.5下Python3.5以及virtualenv、virtualenvwrapper的安装配置
- 正在东京、首尔开DevDays
- origin画图_3分钟浏览,Origin绘图中的12个经典问题集锦,早看早知道,躲坑没烦恼!!!...
- 海量ICLR论文点评公开,用这几个工具可以读得更轻松
- GMapping原理分析
- 局域网共享工具_win10一键局域网共享工具使用教程
- 能玩游戏的计算机推荐,电脑玩啥端游合适 适合长期玩的游戏有哪些
- 【JAVA SE基础篇】30.抽象与接口
- 从黄金时代到没落尽头,“寻求出售”的GoPro遭遇了什么?
- python 下如何播放mp3
- Xcode自动打包和上传蒲公英平台脚本(用python实现)
- 太阳辐照度的测量——基于51单片机
- Linux 系统的使用