响应式设计:理解设备像素,CSS像素和屏幕分辨率
2014-04-30 15:49
357 查看
概述
屏幕分辨率、设备像素和CSS像素这些术语,在很多语境下,是可互换的,但也因此容易在有差异的地方引起混淆,实际上它们是不同的概念。屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的概念;屏幕分辨率和设备像素的差别在于设备像素显示密度。
当设备屏幕ZOOM=100%的时候,浏览器CSS像素尺寸和设备像素相等,而当像素密度(pixel density)为1的时候,屏幕分辨率和设备像素相等。
响应式设计
在响应式设计中,使用了viewport,device-width,media query,width这些概念,web程序员需要准确理解其中的细微差异。media query来探测屏幕尺寸,device-width以设备像素计算屏幕宽度,width以CSS像素计量总的页面宽度(在iPhone中,最小为980px)。
viewport指的是浏览器通过宽度比例来计算元素尺寸的一块区域,通常比屏幕大一点。
而如下meta标签,将使得viewport区域适配于设备像素宽度(在iPhone中,一般为320px)。
<meta name="viewport" width="device-width">
在没有使用meta标签前,页面看起来是这样的(计算元素尺寸时使用了较大的CSS像素宽度):
而添加meta标签后,变为如下(计算元素尺寸时使用了设备像素):
iPhone4的特例
苹果iPhone4采用了新的显示技术,宣称640px的分辨率,但需要注意的是,其实际设备像素宽度仍然是320px,有些设备在media query时返回的是屏幕分辨率而不是设备像素宽度,这些情况导致了网页设计上的不一致。
解决方案和DIPS
Google引入了一个dips(device-independent pixels)的中间概念,web开发人员只需要处理DIPS,究竟屏幕能显示多少内容,而无需关心实际屏幕分辨率,这是好的技术方向,将有助于消除新的硬件显示技术给media query编程带来的混乱。by iefreer
相关文章推荐
- 响应式设计:理解设备像素,CSS像素和屏幕分辨率
- 设备物理像素(设备像素) 设备逻辑像素(设备独立像素) 代码CSS像素 设备像素比 viewport深入理解
- CSS响应式设计之Viewport
- CSS基础篇--web移动端,需要清楚设备像素比devicePixelRatio的应用
- 响应式 Web 设计必备的 12 款 CSS 框架
- 解读所有设备的css像素的网站
- CSS 设计彻底研究(三)深入理解盒子模型
- 移动web开发(一)设备像素,设备独立像素,css像素
- 提升移动设备响应式设计的8个建议
- 响应式设计的5个CSS实用技巧
- 几个响应式设计的css技巧
- CSS检测高像素密度屏幕设备
- css 利用媒体查询进行响应式设计
- @media screen针对不同移动设备-响应式设计
- 使用 Bootstrap 另一个创建响应式设计的方法,是使用现成的 CSS 框架。
- 使用 CSS 媒体查询创建响应式网站-*适用于所有屏幕大小的设计*
- 响应式设计:根据不同设备引不同css样式
- CSS响应式 Web 设计(一) - Viewport