文档章节

像素1

 金于虎
发布于 2016/10/27 11:20
字数 699
阅读 3
收藏 0

#1. 设备像素与CSS像素 你首先需要理解什么是CSS像素,它与设备像素又有何区别。

2.设备屏幕像素 (screen.width/height)

设备像素是我们直觉上认为是“正确”的像素。它能给予一个关于你使用何种设备的正式结论,并且能通过'screen.width/height'获得。

输入图片说明

  1. PC设备像素可以改:
  2. 手机端的设备像素一出产就固定了,不可改变。

##3. 变与不变(缩放)

假设有一个宽为128px(css像素)的元素,屏幕宽度为1024px(屏幕)。当你最调整合适时,元素会占屏幕的1/8.

如果你缩放屏幕,你将得到不同的结果。假设你将屏幕放大到200%,你的128像素的元素将会占1024像素的屏幕的1/4。

缩放在现代浏览器中的应用无非用像素(css像素)尺寸的变化来实现。 这并不是说元素的宽度由128增大到256像素,而是像素点变为原来的两倍。形式上,即便元素占了256的设备像素,它依旧只有128的CSS像素。

换言之,一个放大到200%的CSS像素点是设备像素点尺寸的四倍。(宽度两倍,高度两倍,总体四倍)。

##4. 图片展示 以下图片将更直观的描述这一概念。在一个四像素100%缩放的例子中:CSS像素与设备像素完全重叠。

输入图片说明

现在进行缩小操作,CSS像素尺寸开始缩小,这意味着一个设备像素可以覆盖多个CSS像素。

输入图片说明

如果你进行放大操作,CSS像素尺寸开始扩大,现在一个CSS像素可以覆盖多个设备像素。

输入图片说明

这里的关键点在于 CSS像素 。它决定了你的样式表的呈现。

设备像素对于你来说几乎是完全无用的。当页面不方便阅读时,用户将通过缩放操作来达到舒适的阅读体验。但是,当缩放的水平无法达到你的要求时,浏览器会自动调整CSS布局的放大或缩小。

5.100%缩放

100%缩放 我们通过假定一个100%缩放的例子展开话题。是时候给一个略微严格的定义了: 在缩放水平为100%时,一个CSS像素实际上等价与一个设备像素。 这个关于100%缩放的概念对于后续的阐释是非常重要的。但你不必太过纠结日常的工作,因为在桌面端你的站点通常都是以100%缩放被打开的,即便用户使用了缩放,CSS的像素魔法也会确保样式以相同的比例呈现。

© 著作权归作者所有

上一篇: 尺寸1
下一篇: viewport1
粉丝 1
博文 112
码字总数 46834
作品 0
曲靖
私信 提问
一篇文章告诉你 1px 等于多少 cm

ppi、dp、pt、px、dpr、vw、rem、em、物理像素、逻辑像素……懵就对了! 结论 明白结论说什么的,可跳过此文 以下物理大小单位为 inch: 物理像素的物理大小 = 1/ppi 1dp 物理大小 = ppi/16...

reclay
04/16
0
0
OpenCV学习(15) 细化算法(3)

本章我们学习一下Hilditch算法的基本原理,从网上找资料的时候,竟然发现两个有很大差别的算法描述,而且都叫Hilditch算法。不知道那一个才是正宗的,两个算法实现的效果接近,第一种算法更好...

迈克老狼1
2013/09/17
0
0
深入了解canvas在移动端绘制模糊的问题

由于一些移动端的兼容性原因,我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决,我们采用了pdf.js这个插件,该插件可以将pdf转换成canvas绘制在页面上。不过,在...

carbrokers
04/23
0
0
移动端 UI 适配最佳实践(下)

前两篇更多的是理论部分,这篇主要是实践。 身为攻城狮的你,是否曾想过:如果设计师能按逻辑像素来标注,是多么美好!可现实是,你不得不拿着标注再除个 2 或 3 身为设计师的你,是否曾想过...

yinjq
2015/11/11
0
0
DPR(devicePixelRatio:设备像素比)

如今主流手机屏幕的像素点数已经远远超过了桌面显示器的像素数量,5.5英寸1920x1080P的手机与一个21英寸1920x1080P的显示器相比,同等面积下,手机的像素点更密集,可想而知,在手机屏幕上一...

lwang_it
2018/04/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

在Javascript中Eval函数的使用

【eval()函数】 JavaScript有许多小窍门来使编程更加容易。 其中之一就是eval()函数,这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。 举个小例子: var the_unevaled_ans...

花漾年华
27分钟前
3
0
[日更-2019.5.22、23] Android 系统的分区和文件系统(二)--Android 文件系统中的文件

声明 Android系统中有很多分区,每个分区内的文件系统一般都不同的,使用ADB进入系统/目录下可发现挂载这很多的目录,不同的目录中可来自不同的分区及文件系统; 那么,就来分下这些目录里面...

小馬佩德罗
31分钟前
2
0
数组操作相关算法

/*数组的相关的算法操作:1、在数组中找最大值/最小值*/class Test11_FindMax{public static void main(String[] args){int[] array = {4,2,6,8,1};//在数组中找最大...

architect刘源源
今天
4
0
okhttp3 以上版本在安卓9.0无法请求数据的解决方案

应用官方的说明:在 Android 6.0 中,我们取消了对 Apache HTTP 客户端的支持。 从 Android 9 开始,默认情况下该内容库已从 bootclasspath 中移除且不可用于应用。且Android P 限制了明文流量...

chenhongjiang
今天
12
0
简单示例:NodeJs连接mysql数据库

开篇引用网上的说法: 简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于...

李朝强
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部