屏幕分辨率问题及@media

1.像素

物理像素/设备像素

物理像素也被称为设备像素，它是显示设备最微小的物理部件。

屏幕密度 通常以每英寸有多少物理像素来计算（PPI）

独立像素/css像素，是一个抽象的单位，主要用于浏览器上，用了精确度量web页面上的内容。一般情况下，CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”

在一个标准的显示密度下，一个CSS像素对应着一个设备像素。

独立像素比/window.devicePixelRatio window.devicePixelRatio=物理像素/独立像素

通过计算你会发现刚才的两种手机的结果分别是1或者2（当然还有其它手机屏幕结果有些差别）

手机屏幕分为： 一：非视网膜屏幕（物理像素320，该设备的独立像素（视区宽度）也是320）

　　　　　　　　二：视网膜屏幕（物理像素640，该设备的独立像素（视区宽度）还是320

<meta name="viewport"content="width=device-width"> 这个代码的作用就是让视图区域撑满手机物理屏幕。

html文件头部加上这个代码后，手机显示的大小和电脑显示的大小尺寸大小就一样了。 但是手机上显示的图片就模糊了，这是因为你要显示同样的物理大小，视网膜屏幕就要用双倍的物理像素来显示（一个一像素的图片，如果用浏览器4个像素（即放大了一倍）来看会变模糊和失真，所以在给手机做图片的时候，要放大一倍，就是在手机上显示的图片是100乘以100，那ps做图片要做成200乘以200这样才会清晰）。

 

笔记本的分辨率：

10-12英寸（上网本）1024×600、1366×768
13.3-15.6英寸大部分是1366×768
13英寸有1280×800、1600×900
15英寸有1600×900、1920×1080（单屏最高分辨率）
还有18、19英寸的，分辨率也是1920×1080
华硕三屏笔记本是1920×1080的3倍。


响应式布局方式：
1.外联样式表

在这里我们可以根据不同的设备载入不同的CSS样式表

1 <link rel="stylesheet" type="text/css" media="screen and (min-width:960px)" href="css/gt-960px.css">

当页面宽度大于等于960px时，载入样式表gt-960px.css

1 <link rel="stylesheet" type="text/css" media="screen and (min-width:600px) and (max-width:960px)" href="css/gt-600px-lt-960px.css">

当页面宽度大于等于600px且小于等于960px时，载入样式表gt-600px-lt-960px.css

1 <link rel="stylesheet" type="text/css" media="screen and (max-width:600px)" href="css/lt-600px.css">

当页面宽度小于等于600px时，载入样式表lt-600px.css

2.样式表中内嵌发
@media screen and(){
}
3.弹性图片

弹性图片

我们需要为图片设置max-width: 100%和height: auto，来实现其弹性化。

1 img {
2 　　max-width: 100%;
3 　　height: auto;
4 　　width: auto9; /* ie8 */
5 }