响应式设计：理解设备像素，CSS像素和屏幕分辨率
概述
屏幕分辨率、设备像素（device-width）和CSS像素（width）这些术语，在很多语境下，是可互换的，但也因此容易在有差异的地方引起混淆，实际上它们是不同的概念。
屏幕分辨率和设备像素是物理概念，而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标签前，以踏得网在iPhone5上为例，页面看起来会是这样的（计算元素尺寸时使用了较大的CSS像素宽度）：
显然是因为把640px的内容压缩到了320px物理屏幕上来显示而导致的问题。
而添加meta标签后，变为如下正常显示（计算元素尺寸时使用了设备像素）：
iPhone4的特例
苹果iPhone4采用了新的显示技术，宣称640px的分辨率，但需要注意的是，其实际设备像素宽度仍然是320px，
有些设备在media query时返回的是屏幕分辨率而不是设备像素宽度，这些情况导致了网页设计上的不一致。
解决方案和DIPS
Google引入了一个dips（device-independent pixels）的中间概念，web开发人员只需要处理DIPS，究竟屏幕能显示多少内容，而无需关心实际屏幕分辨率，这是好的技术方向，将有助于消除新的硬件显示技术给media query编程带来的混乱。
by iefreer
响应式设计：理解设备像素，CSS像素和屏幕分辨率相关推荐
- 前端设计 响应式设计_如何响应式设计
前端设计 响应式设计 This guest post about responsive design comes from Krasimir Tsonev! 这个关于响应式设计的来宾帖子来自Krasi ...
- HTML学习笔记之类、布局、响应式设计（九）
9.类.布局.响应式设计 9.1类 使用style标签设置样式颜色 div块儿级元素 <!--类 --> <html> <head> <style> . ...
- 【资源分享】300个响应式设计线性图标
很多情况下,因为响应式设计布局的限制,图标在不同分辨率下显示不够友好,这情况最好的解决方法就是使用图标字体,或者为图标设计多套尺寸出来.不过设计多套图标实在太费时间,如果有免费的话不更好么? 那么接下 ...
- [css] 你对响应式设计的理解是什么？知道它基本的原理是吗？要想兼容低版本的IE怎么做呢？
[css] 你对响应式设计的理解是什么?知道它基本的原理是吗?要想兼容低版本的IE怎么做呢? 理解:在不同系统,不同设备,不同尺寸的界面,有良好的用户体验,舒适的阅读体验,交互体验. 原理:根据不同设 ...
- 如何固定最小宽度_如何使用更新的HTML和CSS函数创建响应式设计
除了使用媒体查询和现代css布局(如flexbox和grid)来创建响应式网站外,我们还可以做好某些被忽视的事情来制作响应式网站.在本文中,我们将探讨许多可用的工具(围绕html和css),从响应图像 ...
- CSS样式－网页响应式设计
响应式设计-网页CSS样式知识 百分比布局 弹性布局 网格布局 最大最小宽度 视图窗口 多媒体查询 最大最小宽度 竖屏横屏 尺寸比 容器属性 容器查询单位 伪类has 百分比布局 简单的讲就是将元素按 ...
- 响应式设计和移动端优化：如何实现页面在不同设备上的适配和优化
章节一:介绍响应式设计和移动端优化 响应式设计是一种使网页能够自适应不同设备和屏幕尺寸的设计方法.它通过使用流式网格布局.媒体查询和弹性图片等技术,使得网页能够在不同分辨率和设备上呈现出最佳的布局和用 ...
- web设计经验一 提升移动设备响应式设计的8个建议
今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...
- [css] 说说响应式设计(responsive design)和自适应设计(adaptive design)的区别？
[css] 说说响应式设计(responsive design)和自适应设计(adaptive design)的区别? 响应式是通过视口分辨率识别不同客户端展现不同的布局和内容,一套代码.自适应是通过 ...
最新文章
- Spring Boot之自动配置
- MIUI 13：带来全新小部件，新增三大隐私保护功能等
- vue aplayer 进度条无法拖动_Vue-rideo-player视频播放插件的使用
- 免安装Oracle客户端使用PL/SQL
- MIS 740: Software Concepts Use different GUI components i
- 在WPF TreeView中使用复选框
- 【转】用Microsoft Ajax Minifier帮你的Javascript瘦身
- 硬盘分区整数计算方法
- 数据结构导论【五】之 图
- MySQL 日志管理、备份与恢复
- 微信小程序页面回到顶端的方式
- mac系统下修改usr/bin文件夹权限问题
- 【Books系列】席慕蓉《回眸》欣赏
- execution(* com.xxx.*.*(..))
- 软件测试知识点和面试题--手工测试篇（功能测试）
- java回溯算法_回溯算法讲解--适用于leetcode绝大多数回溯题目
- 计算车号Java,汽车VIN码校验算法 java版
- 性能优化: http 请求的过程及潜在的性能优化点
- 字节跳动原来这么容易就能进去…
- SIMT ( Single Instruction Multiple Threads）