响应式设计:理解设备像素,CSS像素和屏幕分辨率
概述
屏幕分辨率、设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念。
屏幕分辨率和设备像素是物理概念,而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编程带来的混乱。
响应式设计:理解设备像素,CSS像素和屏幕分辨率的更多相关文章
- Windows 10 响应式设计和设备友好的开发
使用Effective pixels有效像素设计UI 什么是缩放像素和Effective有效像素: 当你的应用程序运行在Windows的设备,系统用一个算法控制的规范,字体,和其他UI元素显示在屏幕上 ...
- 响应式设计的5个CSS实用技巧
正如我在教程响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了.现在我分享在编码时常用的五个CSS技巧并举例说明.这些技巧都是使用简单 ...
- CSS 响应式设计
响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...
- css响应式设计
响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...
- web设计经验<一> 提升移动设备响应式设计的8个建议
今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...
- 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理
第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...
- css新单位vw,vh在响应式设计中的应用
考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...
- 移动端和pc端,响应式设计布局
1.什么是响应式 Web 设计? 响应式 Web 设计让你的网页能在所有设备上有好显示. 响应式 Web 设计只使用 HTML 和 CSS. 响应式 Web 设计不是一个程序或Javascript脚本 ...
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
随机推荐
- TableLayoutPanel 的使用
VS自带控件TableLayoutPanel的功能应用网上都有资料.下面是使用中的一些问题. 1.动态加载控件时使用SetRowSpan.SetColumnSpan方法会使得界面响应缓慢 解决方案: ...
- Android记录4--自定义ToggleButton+用SharedPreferences保存用户配置
Android记录4--自定义ToggleButton+用SharedPreferences保存用户配置 2013年8月14日Android记录 很多应用都会有用户设置,用户的一些偏好可以由用户来决定 ...
- GTW likes math(简单数学)
GTW likes math Accepts: 472 Submissions: 2140 Time Limit: 2000/1000 MS (Java/Others) Memory Limi ...
- NS2 nam中节点及数据流颜色设置
NS2 节点颜色设置在http://hi.baidu.com/jrwen0/item/d105c642f4c3ce36fb89601b说明的比較具体,大家能够參见. 我这里想说的是数据流颜色的设置,相 ...
- c 围圈报数
#include<stdio.h> /*围圈报数*/ void left(int *p,int m,int n) { int i,j,count; i = j = count = ; ) ...
- 【转】Ubuntu下deb包的安装方法
[转]Ubuntu下deb包的安装方法 deb是debian linus的安装格式,跟red hat的rpm非常相似,最基本的安装命令是:dpkg -i file.deb dpkg 是Debian P ...
- 如果让莎士比亚、海明威编写JavaScript代码
本文作者Angus Croll是Twitter工程师.JavaScript迷.文学迷,并且非常喜欢作家海明威.他在梦中"梦见"一些名人编写JavaScript代码,不同的作家呈现出 ...
- Object lifetime
Object lifetime Temporary object lifetime Storage reuse Access outside of lifetime Every object has ...
- WRTnode 的 HTTP Web 开关实验(2016-05-16)
前言 这里是节取自 物联网的任意门——WRTnode2R 评测 中的 http web 开关灯实验,所以有一些前置设置如果没有描述清楚可参考该处. 正文 步骤一:编辑一个 html 文件,放在 /ww ...
- json所需jar包 & js解析后台json数据
Json 所需jar包: var listxxx='<%=request.getAttribute("listxxx")%>'; // list数组 var mapx ...