### 页面宽度 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、