CSS单位与尺寸参数

栏目: CSS · 发布时间: 5年前

内容简介:常用的单位,即像素pixel缩写,但通常被当做绝对单位,但严格说并不是,因为官方考虑到观看不同设备显示屏时,使网页设计出的某一图形的显示大小在人眼中的观看效果差不多,而定义的一个相对值,即人以一臂之遥观看96DPI的显示屏的角度,大概就是利用透视的近大远小原理,照顾不同设备的最终观看效果。比如某网页图形设置为一固定的px值,在手机浏览器上显示是用直尺测大概1cm,但是同样在不缩放情况下,电脑显示屏测量可能就是1.5cm左右,如果是打印机打印出来的话也许就是2cm左右了。常用的相对单位,前面的数字是比例,即相

css单位

px

常用的单位,即像素pixel缩写,但通常被当做绝对单位,但严格说并不是,因为官方考虑到观看不同设备显示屏时,使网页设计出的某一图形的显示大小在人眼中的观看效果差不多,而定义的一个相对值,即人以一臂之遥观看96DPI的显示屏的角度,大概就是利用透视的近大远小原理,照顾不同设备的最终观看效果。

比如某网页图形设置为一固定的px值,在手机浏览器上显示是用直尺测大概1cm,但是同样在不缩放情况下,电脑显示屏测量可能就是1.5cm左右,如果是打印机打印出来的话也许就是2cm左右了。

em

常用的相对单位,前面的数字是比例,即相对于 父元素 的字体尺寸的比例,比如父元素字体16px,子元素设置1em,也可以理解为100%,那么子元素也是16px,同样,2em就是200%,32px,也可以是小数0.2em,1.5em等等。

rem

类似于em,但rem是相对于 根元素html ,例如用css标签选择器给html标签设置字体尺寸font-size大小为20px,那么文档中的每个1rem就代表20px,1.5em代表30px,以此类推。

in,cm,mm

这些虽然是生活中的物体测量单位,但网页的1cm尺寸的元素显示到显示器上,用直尺测量通常不是标准1cm,因为css已经默认设置1in=96px,前面也讲过px会因显示屏而不同,因此最终尺寸也不是绝对的,其他也差不多,所以这类尺寸很少用。

尺寸比较:

CSS单位与尺寸参数

显示原理

dpi, ppi

dpi(dot per inch),即每英寸多少点,是针对打印机的一个概念,点可以理解为墨点;

ppi(pixel per inch),即每英寸多少像素,是针对显示器的概念,开发中一般关心显示器问题,所以一般认为 dpippi 是同一个概念;

dpr

dpr(device pixel ratio),即物理像素与独立像素的比例;

  • 物理像素

物理像素也叫 设备像素 ,屏幕显示图像都是由很多个像素点组成,屏幕出厂时本身带的点阵数就是它的物理像素;

  • 独立像素

独立像素 ,又叫 逻辑像素 ,或者 css像素 ,顾名思义,逻辑嘛,当然是独立于物理的概念,大小没有固定实际值,也是前面提到的css里面的 1px

逻辑像素可以通过js代码获取, screen.width 获取逻辑像素宽度, screen.height 是高度;至于 dpr ,可以通过 devicePixelRatio 这个全局属性获取,现在的新一些的安卓智能手机一般这个比例是 3 ,电脑的一般是 1 ,iphone、iPad一般是 2

注意,dpr为 1 ,说明一个css像素块由 1x1 个物理像素块来显示,也就是一个物理像素,如果为 2 ,则是一个css像素由 2x2 个物理像素来显示,也就是 4 个像素块,以此类推;这里也就能明白了,dpr的存在就是为了是小尺寸设备屏幕显示出高画质图形,细节更高就更清晰了;

现在来说设备像素的获取,并没有直接的获取方法,所以可以通过 dpr乘以逻辑像素的方法获取

综合举例:

var logicWidth = screen.width;
var logicHeight = screen.height;
var dpr = devicePixelRatio;
var deviceWidth = logicWidth * dpr;
var deviceHeight = logicHeight * dpr;
// 输出逻辑像素
console.log('逻辑像素:' + logicWidth + 'x' + logicHeight);
// 输出设备像素
console.log('物理像素:' + deviceWidth + 'x' + deviceHeight);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

软件开发者路线图

软件开发者路线图

Dave H. Hoover、Adewale Oshineye / 王江平 / 机械工业出版社 / 2010年9月 / 35.00元

作为一名软件开发者,你在奋力推进自己的职业生涯吗?面对今天日新月异和不断拓展的技术,取得成功需要的不仅仅是技术专长。为了增强专业性,你还需要一些软技能以及高效的学习技能。本书的全部内容都是关于如何修炼这些技能的。两位作者Dave Hoover和Adewale Oshineye给出了数十种行为模式,来帮你提高主要的技能。 本书中的模式凝结了多年的调查研究、无数次的访谈以及来自O’Reilly在......一起来看看 《软件开发者路线图》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

在线进制转换器
在线进制转换器

各进制数互转换器