### 页面宽度
PC上：目前绝大多数显示器都支持 1024 x 768 及其以上分辨率，480太窄，1920则太宽（太宽也不利于阅读），因此960就成为网页栅格系统中的最佳宽度了。
手机端：
~~~
body.an{
width:100%;
min-width:320px;
max-width:640px;
margin:0 auto;
background:#eee
}
~~~
### 4、device-aspect-ratio
~~~
device-aspect-ratio：<ratio>
~~~
说明：定义输出设备的屏幕可见宽度与高度的比率。
如常讲的显示器屏幕比率：4/3, 16/9, 16/10
本特性接受min和max前缀，因此可以派生出min-device-aspect-ratio和max-device-aspect-ratio两个媒体特性。
简单列举几个应用示例：
~~~
@media screen and (device-aspect-ratio:4/3){ … }
@import url(example.css) screen and (min-device-aspect-ratio:4/3);
~~~
### 5、通用名词
(1) 通用名词
屏幕尺寸(screen size): 按照屏幕的对角线测量的实际大小;
--屏幕尺寸分类: 屏幕尺寸分为 小(small), 普通(normal), 大(large), 超大(extra large) 四种;
--自动渲染 : Android SDK根据屏幕实际尺寸, 选择一种方式(四选一)对布局进行渲染, 这是人为不可控的, 对程序员透明;
屏幕尺寸界线 : 屏幕的尺寸是按照dp计算的, dp越大, 尺寸越大;
--small(小屏) : 最少 320dp * 426dp;
--normal(普通) : 最少 320dp * 470dp;
--large(大屏) : 最少 480dp * 640dp;
--xlarge(超大) : 最少 720dp * 960dp;
屏幕长宽比(aspect ratio) : 手机屏幕物理宽度和物理高度比例关系, 程序中可以为指定长宽比屏幕提供布局资源;
屏幕分辨率(resolution) : 屏幕上显示的物理像素总和, 如 320 * 480;
--注意 : 分辨率不等于屏幕宽高比, 在Android程序中尽量避免直接使用px;
像素(px) : 实际的分辨率, 例如在 320 * 480分辨率手机上, 320 和 480 就是像素点;
分辨率(px)与设备独立像素(dip)比较: dip越大, 屏幕的尺寸越大, 分辨率越高, 越清晰, 屏幕大分辨率不一定大, 如电脑;
(2) Android设备相关名词
密度(density) : 在物理宽高范围内显示的像素数量, 同样屏幕大小的手机, 低密度显示的像素点少, 高密度显示的像素点多;
-- 资源分类 :固定像素宽高的UI资源(图片资源的宽高是按照像素确定的), 在低密度显得很大, 在高密度显示的很小, 因此为了使UI组件显示大致统一(不是绝对), 美工需要一种资源设置成4份不同像素的资源, 放到对应目录中去;
**设备独立像素(dip/dp)**: 该像素与设备硬件有关, 不同的设备显示效果不同, 与 实际密度 和 像素 无关;
-- 密度(dpi)无关 : 密度是每英寸包含像素个数, dip是基于屏幕物理密度的抽象单位;
-- dip与px等效情况 : 在密度为160dip的屏幕上, 1dip == 1px,320*480分辨率手机 宽2英寸 高3英寸, 那么手机密度为160dpi;
-- 屏幕不变分辨率改变 : 如果上面 2 * 3 英寸屏幕不变, 分辨率改成 480 * 800 分辨率, 这时每英寸的像素数量明显增加了, 即密度增加, 为240dpi, 2英寸有480像素; 屏幕不变的前提下 , 如果在160pi下100dip像素的实际长度 与 240dip下 100dip像素的实际长度是一样的;
-- 实际尺寸计算 : view组件使用dip作为单位, 如果在160dpi下直接按照像素点画出, 如果密度不是160dpi, 那么会计算一个转换比例, 这个比例与实际尺寸相乘得到新的像素点个数;
-- 计算公式: px = dip * density / 160; 当密度为160的时候, 屏幕的 px == dip;
-- Google建议: 在布局文件设置组件属性的时候, 尽量使用dip作为单位, 字体大小统一使用 sp 作为单位;
px与dip区别: 下面的情况是以屏幕尺寸不变为前提的;
-- px绘图 : 在320像素宽的手机上, 100px的长度 是 480宽度像素手机上长度的 2/3;
-- dip绘图 : 屏幕大小不变的情况下, 100dip 在320 480 像素手机上实际尺寸长度是一样的;
px与dip, px与sp之间转化工具类 :
(3) 获取密度相关方法示例
1. 真实密度(像素计算)和归一化密度(物理长度计算)
px与dp换算公式 : px = dip * density / 160;
计算像素点使用的是归一化密度, 计算实际尺寸使用的是精确的物理密度;
真实密度 : 每英寸含有的像素点数, 拿我使用的三星GT-N8000为例, 水平方向上的真实密度为 每英寸149.82像素, 垂直方向上的真实密度为 每英寸150.51像素;
-- 运算不按照该方式 : 按照该密度计算 1280dp对应的是 1280 * 149.82 / 160 = 1198.4 个像素;
举例 :
给一个Textview控件设置1280dp的宽度, 然后可以看到该组件横向沾满宽度, 按照实际运算该1280dp对应的是1198个像素, 是无法占满整个屏幕的;
XML布局文件 :
### 6、分辨率
分辨率（resolution，港台称之为解释度）就是屏幕图像的精密度，是指显示器所能显示的像素的多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。
以分辨率为1024×768的屏幕来说，即每一条水平线上包含有1024个像素点，共有768条线，即扫描列数为1024列，行数为768行。分辨率不仅与显示尺寸有关，还受显像管点距、视频带宽等因素的影响。其中，它和刷新频率的关系比较密切，严格地说，只有当刷新频率为“无闪烁刷新频率”，显示器能达到最高多少分辨率，才能称这个显示器的最高分辨率为多少。
分辨率不能代表屏幕的大小，同样大小的屏幕最高分辨率越高，其清晰度就越高
### 9、移动设备的媒体查询
~~~
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
~~~
### 10、max(min)-device-width和max(min)-width的区别
在网页自适应设计中，max-device-width和max-width是不可缺少的两大CSS属性，但是可能大家在使用的选择上没有太多讲究，认为用其中一个即可。确实，如果没有特定要求，用任何一个都没有什么问题，不过如果你对此两个属性有了充分的认识之后，你或许把网页的自适应设计得更为极致一些。
max-device-width和max-width是有区别的，表现在如下几个方面：
1、max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。
2、max-width是目标显示区域的宽度，例如，浏览器宽度。
3、如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为“PC设备”没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为“显示区域”即浏览器大小发生了变化。
4、如果使用max-device-width，那么当手机由竖变横时，CSS是不执行的，因为“手机宽度”并没有变化。如果使用max-width，那么当手机由竖变横时，CSS是执行的，因为“显示区域”发生了变化。
5、通常，面向“移动设备”用户使用max-device-width；面向“PC设备”用户使用max-width。
通过这样解释，你应该对max-device-width和max-width的区别和使用有所了解了吧。
看看下面的写法
~~~
/* #### mobile devices #### */
@media screen and (max-device-width: 480px){
/* CSS 代码 (xee:PC端不生效)*/
}
/* #### PC #### */
@media screen and (max-width: 1024px){
/* CSS 代码 (xee:PC端生效)*/
}
/*#### PC & mobile devices #### for 720 px width screen */
@media only screen and (max-device-width:720px),only screen and (max-width:720px){
body,section,button,h1,p,.layer,.downall_btn,.introduce,.playlist,.recom_picbox{font-size:30px;}
}
~~~
min-device-width和min-width的区别，跟max-device-width和max-width的区别是一样的。
### 11、
### 12、
- 序
- 开发自己的博客
- 面试集合
- 基础
- 1、JavaScript
- js技巧
- 2、CSS
- position之absolute
- em与rem
- inline-block
- background
- 圆角、透明度、渐变
- 关于css中的0和none
- css display:none小结
- z-index小结
- 理解滚动条
- 有关@font-face的问题
- 3、HTML
- URI中依赖协议的URL
- 4、MySQL
- limit使用
- 5、jQuery
- 6、移动Web开发
- 设计稿与分辨率
- 字体
- 图片的自适应
- 7、前端布局bug问题（！<=IE8）
- SEO与页面结构
- seo
- vsphere 虚拟服务器
- 代码里的彩蛋（神注释）
- 玩转HTML5移动页面
- 知识梳理
- JS 键盘码
- 其他资源记录
- temp
- TODO
- 简单有趣的库😎
- xx