屏幕像素密度会影响web代码效果吗 - 物理像素css像素

时间:2018-12-06分类:物理

屏幕像素密度会影响web代码效果吗

会的

在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级,分辨率也是五花八门

qt中设置width大小指的是物理大小还是分辨率

手机里css1个像素等于2个物理像素,写成min-width、max-width,400px已经算是极致了,它指手机浏览器的分辨率,而不是手机设备的屏幕分辨率 可以试试320、360、384、400这几个临界点

一个像素(px)是到底什么概念

px,对于许多网页设计者来说,是最常用的CSS长度单位。然而,1px到底多长,恐怕没有多少人回答得上来。

CSS长度本身有绝对长度和相对长度的区分。

cm、pt之类的都是绝对长度,它们是物理长度——1cm是1/100米,而1米则大约是光在1秒钟内跑过距离的3亿分之一。(至于光速和1秒的精确值到底是多少,请查阅维基百科光速条目和秒条目。)1pt则是1/72英寸,而1英寸换算到公制是2.54cm。

而em、ex,以及百分比,则是相对长度。比如em相对于当前字体大小,百分比则根据属性定义不同有不同涵义,例如margin的值如果是百分比,表示是相对于父元素的width。

然而,px是什么?

一般而言,pixel(像素)是图像的基本采样单位。详细解释见维基像素条目。所以它不是一个确定的物理量,也不是一个具体的点或者小方块(尽管可以用点和小方块来呈现),而是一个抽象概念。

不同的设备,其图像基本单位是不同的,比如显示器的点距,可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.29mm之间。而打印机的墨点,也可以认为是打印机的物理像素,300DPI就是0.085mm,600DPI就是0.042mm。

注意,我们通常所说的显示器分辨率,其实是指桌面设定的分辨率,而不是显示器的物理分辨率。只不过现在液晶显示器成为主流,由于液晶的显示原理与CRT不同,只有在桌面分辨率与物理分辨率一致的情况下,显示效果最佳,所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。

按照CSS规范的定义,CSS中的px是一个相对长度,它相对的,是viewing device的分辨率。这个viewing device,通常就是电脑显示器。典型的电脑显示器的分辨率是96DPI,也就是1像素为1/96英寸(实际上,假设我们的显示器分辨率都与物理分辨率一致,而液晶点距其实是0.25mm到0.29mm之间,所以不太可能是正好1/96英寸,而只是接近)。

一般来说,px就是对应设备的物理像素,然而如果输出设备的解析度与电脑显示器大不相同,输出效果就会有问题。例如打印机输出到纸张上,其解析度比电脑屏幕要高许多,如果不缩放,直接使用设备的物理像素,那电脑上的照片由600DPI的打印机打出来就比用显示器看小了约6倍。

所以CSS规定,在这种情况下,浏览器应该对像素值进行缩放调节,以保持阅读体验的大体一致。也就是要保持一定像素的长度在不同设备输出上看上去的大小总是差不多。

怎样确保这一点呢?直接按照设备物理像素的大小进行换算当然是一个方式,但是CSS考虑得更多,它建议,转换应按照“参考像素”(reference pixel)来进行。

眼睛看到的大小,取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西,与1米远处的10厘米见方的东西,看上去的大小差不多是一样的,所谓一叶障目不见泰山,讲的就是这个常识。

因此CSS规范使用视角来定义“参考像素”,1参考像素即为从一臂之遥看解析度为96DPI的设备输出(即1英寸96点)时,1点(即1/96英寸)的视角。

请注意这个差别——CSS规范定义的参考像素并不是1/96英寸,而是1/96英寸在一臂之遥的看起来的视角。通常认为常人臂长为28英寸,所以其视角可以计算出来是0.0213度。(即(1/96)in / (28in * 2 * PI / 360deg) )

我们在使用不同设备输出时,眼睛与设备输出的典型距离是不同的。比如电脑显示器,通常是一臂之距,而看书和纸张时(对应于打印机的设备输出),则通常会更近一些。看电视时则会更远,比如一般建议是电视机屏幕对角线的2.5到3倍长——如果你是个42'彩电,那就差不多是3米远。看电影的话……我就不知道多远了,您自己量吧。

因此,1参考像素:

对于电脑显示器是0.26mm(即1/96英寸);

对于激光打印机是0.20mm(假设阅读距离通常为55cm,即21英寸);

而换算时,对于300DPI的打印机(即每个点是1/300英寸),1px通常会四舍五入到3dots,也就是0.25mm左右;而对于600DPI的打印机,则可能四舍五入到5dots,也就是0.21mm。

左边的屏幕(可以认为是电脑屏幕)的典型视觉距离是71厘米即28英寸,其1px对应了0.28mm;而右边的屏幕(可以认为是你的42寸高清电视)的典型视觉距离是3.5米即120英寸,其1px对应1.3mm。42寸的1080p电视,分辨率是1920*1080,则其物理像素只有0.5mm左右,可见确实是高清哦。

综上,px是一个相对单位,而且在特定设备上总是一个近似值(原则是尽量接近参考像素)。

然而,如果你把绝对单位理解为对输出效果的绝对掌控,事情却大相径庭。就网页输出的最主要对象——电脑屏幕来说,px可被视为一个基准单位——与桌面分辨率一致,如果是液晶屏,则几乎总是与液晶屏物理分辨率一致——也就是说网页设计者设定的1px,就是“最终看到这个网页的用户的显示器上的1个点距”!反倒是那些绝对单位,其实一点也不绝对。

因为绝对单位比如cm或者pt,显示在屏幕上时最后还是要换算为像素,而且这种换算不是按照像素的实际物理长度来换算的(浏览器不用知道,也不可能知道当前这台显示器的1px物理长度到底是多少),而是按照桌面设定的DPI计算的。也就是说,网页设计者指定某个字体是12pt(即1/6英寸或4.2mm),实际上你量量屏幕,几乎不可能是正好12pt,而只是接近12pt的16px(按照96DPI换算)而已。如果你的屏幕点距是0.29mm,则实际上是4.64mm或13.15pt。假如你把桌面改为大字体(120DPI),则最终12pt相当于20px,按照0.29mm点距,最终效果是16.44pt。

过去,建议网页设计者不要使用px,一个原因就是基于用户可以根据自己的需要调节桌面DPI,从而控制绝对长度的实际长度(绕口令啊)。

然而这其实是可疑的。既然绝对长度的实际长度可以根据需要调节,没有理由px这样一个相对长度不能根据需要调节。就好像照片在实际打印时你当然可以根据需要缩放一样,以px设定的字体和图像在实际显示时完全可以进行缩放——这时网页设计者指定的1px就不再对应于用户桌面的1px,而是可能对应1.2px或1.5px或其他值。

过去浏览器的调节字体大小的选项只对绝对长度有效(相当于调节浏览器内部的DPI),对px无效,这只能说是过去浏览器的设计问题,并不是px的固有问题。现在浏览器都已经支持针对以px设定的字体的缩放了。像Firefox,用户还可以选择是单单缩放字体,还是连图片一块儿缩放。所以全部使用px的“像素级精确设计”完全是可行的,也是我认为合理的设计方式。毕竟,CSS中的px本来就是要确保一致的阅读体验。至于是流式布局还是固定布局,是否能适应不同的分辨率,那是另一个话题,与是否使用px作为单位并没有直接关联。

RetinaSafariCSS中的1px实际上是1px吗

query取得iframe中元素的几种方法

在iframe子页面获取父页面元素

代码如下:

$(

诺基亚N8到底多少像素扬声器系统和闪光灯都是什么

.设计

返回页首 尺寸

尺寸:113.5 x 59 x 12.9 毫米

重量 (含电池):135 克

体积:86 立方厘米

屏幕和用户界面

屏幕大小:3.5 英寸

分辨率:16:9 nHD (640 x 360 像素) OLED

1670 万色

电容式触摸屏

方向传感器 (加速计)

指南针 (磁力计)

距离传感器

环境光线探测器

按键和输入法

物理按键 (功能表键、电源键、锁定键、音量键、照相机键)

手指触摸支持文本输入和用户界面控制

屏幕 ITU 键盘和全键盘

屏幕字母数字键盘和全键盘

可使用电容式触控笔

中文手写识别

颜色

镀铝外壳,提供多种颜色:

银色

灰色

橙色

蓝色

绿色

可选颜色因国家/地区而异

个性化设置

最多 3 个可定制的主屏幕:

功能表

小工具

主题模式

快捷方式

图标

可定制情景模式

铃声: .MP3, WMA, AAC, eAAC, eAAC+, AMR-NB, AMR-WB, E-AC-3, AC-3

视频铃声

主题模式

壁纸

屏幕保护图案

声音主题

预装主题元素

可更换颜色主题模式

.硬件

返回页首 电源管理

BL-4D 1200 毫安时锂电池

通话时间 (最长):

GSM 12 小时

WCDMA 5小时50分钟

待机时间 (最长):

GSM 390 小时

WCDMA 400小时

视频播放时间 (H.264 720p,最高支持每秒 30 帧):6 小时 (经 HDMI 连接至电视机)

视频录制时间 (H.264 720p,最高支持每秒 25 帧):3小时20分钟

视频通话时间 (最长):2小时40分钟

内部存储器:16 GB 音乐播放时间 (离线模式,最长):50小时

实际工作时间可能有所不同,具体取决于使用的无线接入技术、运营商的网络配置和使用方式。

存储空间

内部存储器:16 GB

MicroSD 存储卡插槽,支持热插拔,最高 32 GB

工作频率

GSM/EDGE 850/900/1800/1900

WCDMA 850/900/1700/1900/2100

可在 WCDMA 与 GSM 各频段间自动切换

航班模式

数据网络

GPRS/EDGE 等级 class B,多时隙等级 class 33

HSDPA Cat9,最高速度可达 10.2 Mbps,HSUPA Cat5 2.0 Mbps

WLAN IEEE802.11 b/g/n

支持 TCP/IP

可充当数据调制解调器

支持与 MS Outlook 联系人、日历和记事本的同步

需要数据服务。并非所有网络都提供数据服务。HSDPA 数据传输速度最高可达 10.2 Mbps,但可能会因网络性能和其他条件而异。数据连接的建立与保持取决于网络的可用性、提供商的支持和信号强度。

连接功能

蓝牙 3.0

HDMI

2 毫米充电插孔

Micro USB 充电插孔

高速 USB 2.0 (micro USB 插孔)

移动 USB

3.5 毫米 AV 插孔

调频收音机

调频发射机

.软件与应用程序

返回页首软件平台和用户界面

诺基亚 Symbian ^3

Java MIDP 2.1

QT4.6、客户端平台 2.0、Common web runtime 2.0

HTML 4.1

空中传送 (FOTA) 和互联网传送 (FOTI) 软件更新

Flash Lite 4.0

OMA DM 1.2、OMA Client provisioning 1.1

应用程序

主要应用程序:日历、名片夹,音乐播放器、互联网、信息、照片、Ovi 商店、地图、视频、网络电视、Office 文档编辑、视频和照片编辑器、邮件、聊天、收音机

PC 应用程序:诺基亚 Ovi 套件、诺基亚 Ovi 播放器

个人信息管理 (PIM)

详细的联系人信息

日历

待办事项

备忘

录音器

计算器

时钟

.通讯

返回页首 电子邮件和信息

简便易用的电子邮件客户端,支持图像、视频、音乐以及 .doc、.xls、.ppt、.pdf、.zip 文档附件

电子邮件 HTML 支持

支持多种协议的通用电子邮件客户端:: 常用的 POP/IMAP 服务、Mail for Exchange、IBM Lotus Traveler

编辑主要 Office 文档

用于主屏幕的电子邮件网络小工具

即时信息聊天支持:OVI Chat*

通用的彩信/短信编辑器

用于短信息的会话视图

通过 Nokia Messaging 电子邮件和即时信息功能可提供推送电子邮件和扩展的门户支持

*部分功能可能只有通过下载才能使用或者因市场而异只有具备兼容彩信或电子邮件功能的设备才能接收和显示彩信。内容外观可能有所不同。部分图像及铃声无法转发 通话管理

名片夹:先进的名片夹数据库,支持每个联系人有多个号码和电子邮件详情,可带缩略图和视频片段

单键拨号、声控拨号 (与说话者无关) 及声控命令

已拨电话、已接来电和未接来电的通话记录

会议通话

内置免提扬声器

视频通话

.共享与互联网

返回页首 浏览与互联网

完整浏览实际网页

通过触控方式进行网络浏览

支持的标记语言:HTML、XHTML、MP、WML 和 CSS

支持的协议:HTTP 1.1 和 WAP

支持 TCP/IP

可视化历史记录、HTML、JavaScript 支持、支持 Flash LIte 4.0 和 Flash 视频

.导航功能

返回页首GPS 和导航

内置 GPS 和 A-GPS 接收器带有免费驾车和步行导航功能的 Ovi 地图

Wi-Fi 定位

指南针和加速计可确保正确的显示方向

将地图免费传输/上传至设备存储器的诺基亚 Ovi 套件

*通过“空中传送”下载地图可能需要传输大量的数据。您的服务提供商可能会收取数据传输费。某些特定产品、服务和功能的提供情况可能会因地区而异。请向您当地的诺基亚经销商咨询详细情况和语言选项的提供情况。产品规格如有变更,恕不另行通知。 .摄影

返回页首照相/摄像机

1200 万像素照相/摄像机,采用卡尔蔡司光学镜头

全屏 16:9 取景器,带有易于使用的触摸屏参数

氙闪光灯

面部识别软件

自动对焦

焦距:5.9 毫米

光圈数/孔径:F2.8

静止图像文件格式:JPEG/EXIF

最高支持 2 倍数码变焦

用于视频通话的辅助照相/摄像机 (VGA,640 x 480 像素)

图像拍摄

在图像和视频上自动添加位置标记 (地理标签)

自动为拍摄的图像调整方向

用手指可在图像查看器中缩放照片

按标签云图、月份和图册浏览照片,支持幻灯片播放

照片编辑器

其他

内部存储器:16 GB

MicroSD 存储卡插槽,支持热插拔,最高 32GB

高速 microUSB 至 PC 连接

.视频

返回页首摄像机

主照相/摄像机

1200 万像素,采用卡尔蔡司光学镜头

高清品质 720p 分辨率

拍摄 16:9 高清视频

拍摄视频采用 720p、每秒 25 帧,编解码器为 H.264、MPEG-4

可以设置场景、摄像灯、白平衡、色调

用于视频通话的 VGA 辅助照相/摄像机

视频共享与播放

通过 HDMI 连接线在高清电视机上播放高清 720p 视频

*通过 HDMI 和家庭影院播放时具有杜比数字+环绕音效

支持下载、流媒体和渐进式下载

视频编辑软件

访问上次播放的视频并继续播放

视频应用程序:存储的视频集

网络电视点播小工具可收看本地或全球互联网流媒体电视

支持 Flash 视频

流媒体

网络电视

支持视频通话和视频共享 (WCDMA 网络服务)

杜比数字+技术。杜比是 Dolby Laboratories 的注册商标。 视频编解码器及格式

H.264、MPEG-4、VC-1、H.263 (CIF 30 帧/秒)

Real video 10

ON2 VP6 (VGA 30 帧/秒)

Flash 视频 (VGA 30 帧/秒)

流媒体:H.264、MPEG-4、VC-1、Real video 10、3gp

.音乐与音频

返回页首 音乐功能

封面流用户界面可浏览您的音乐曲目集中的专辑

指定市场带有音乐服务

诺基亚音乐播放器

Ovi 音乐

音乐编解码器:.MP3、WMA、AAC、eAAC、eAAC+、AMR-NB、AMR-WB

最高支持 320 kbps 的位速率

DRM 支持 WM DRM、OMA DRM 2.0

调频发射机

收音机

立体声调频收音机 (87.5-108 兆赫)

.游戏

返回页首游戏

使用触控界面,畅玩各类游戏

带有 OpenGL 2.0 的专用图形处理器,支持 3D 图形

Java 游戏

使用加速计畅玩各类游戏

.环保功能

返回页首 节能

省电模式、环境光线传感器、未拔充电器提醒、高效的诺基亚便携式旅行充电器 AC-10C

材料

产品表面不含 PVC 和镍,不含溴氯化合物与三氧化二锑,符合诺基亚物质清单中的规定

包装

采用可再生与完全可回收利用的材料制成

生态内容和服务

Ovi 提供用于路线优化与行人导航的地图

回收

设备的所有材料均可回收再用为材料与能源

使用指南

设备与网上均提供交互式用户帮助,包装盒内仅提供《快速指南》,环保页中提供环保提示

用于路线优化和步行导航的地图

完整生态宣言

.包装内容

返回页首标准销售包装

诺基亚 N8 手机

诺基亚电池 BL-4D

诺基亚数据线 CA-179

诺基亚立体声耳机 WH-701

诺基亚便携式旅行充电器 AC-10C

诺基亚 HDMI 适配器 CA-157

诺基亚 micro USB OTG 转 USB 适配器 CA-156

《快速入门指南》

如何使用CSS在页面中精确固定一个单位的尺寸

屏幕分辨率不管怎么变,实际网页尺寸都是一样的,假设我做了个网页,高10米,假设你有3个显示设备:

屏幕高1米的手机,下拉10个屏幕距离从头到尾看完我的网站。

屏幕高3米的平板,下拉约3.335个屏幕距离从顶部看到我网站底部。

屏幕高5米的电脑,下拉2个屏幕距离。

屏幕大小分辨率变了,你拉的次数就对应的变,假设你眼睛与3个设备的距离,角度都完全一样的话,在3个设备上最终你看玩网页眼睛所经过的距离都是一样的。

像素是个仅仅用于屏幕的相对单位,跟现实中1厘米就是1厘米不一样。

1 像素 表示显示屏幕上该设备能表达出的最小的一个点的大小。物理设备决定像素的大小。

如果我有个破手机,屏幕高4厘米,屏幕上的一个像素精确的测量起来大小为:0.1毫米,那在我的显示器上,10像素就等于1毫米,一根烟8cm长,在我的电脑上显示就要占:800像素长。那么我整个屏幕才4厘米高(在我屏幕上400像素正好4cm),那根烟一屏就显示不玩,要两屏。

而你有台苹果5s,屏幕高度是10厘米。你的设备高精度,一像素大小为0.05毫米,10像素就等于0.5毫米,那根烟在你5s上显示就要1600像素长。你屏幕高10厘米,这个范围可以显示2000个像素(由你的设备像素大小0.05mm决定的),所以烟在你屏幕上只要一部分就能显示了,还空出来400像素的高度。

像素不一定就是1x1比例正方形的,很多设备上可能是1x1.2、1x1.4之类的比例。

做网页一般用像素px单位、em字号单位、或者100%单位。

最新推荐

自考英语二怎么学习 - 自考英语二视频免费学

2007郑州市高中物理教师招聘 - 物理教师最新招聘信息

胎儿超声生物物理评分多少正常 - 胎儿生物理评分标准

我今天查成绩2012考研英语二为什么是零分啊谁能给个解释 - 考研英语二2012年翻译

李老师教我们学英语用英语怎么说MissLius - 李老师教我们英语怎么说

2014年大学英语四级评分标准要具体到每一个题目图片也ok - 2014英语二翻译评分标准

初三的教学数学中有教学生画二次函数图像的请问怎么使用电 - 初三数学二次函数图像怎么画

淋雨的滋味作文600初二 - 淋雨的滋味作文

做阳光少年作文400字 - 关于最美少年作文400字

春节期间与家人团聚的一件事作文450字急 - 春节期问与家人团聚一件事作文500字

英语蓉城学霸七上答案 - 蓉城a七上答案英语

人教版七年级语文上册必背古诗文有哪些 - 语文人教版初一古诗

数学拓补 - 数学最难的是拓补学吗

求苏教版初一数学初二数学物理所有课件 - 浙教版八年级数学教案

难忘的一次活动作文600字 - 一次活动的作文600字

一张中国地图用英语怎么说为什么不是aChinasmap而是a - 地图用英语怎么说

和家人一起踏青的作文 - 和家人一起郊游作文

km值的意义是指什么 - km值的物理意义是什么

关于肥胖的原因的英语作文 - 肥胖英语ppt

无锡市2013高三上学期期末英语考试作文范文谁有 - 高三英语考试作文范文