响应式布局@media

1. @media使用方法

1.1 案例

// 判断媒体类型，引用不同的样式表

// 判断媒体类型，执行不同的css样式属性
@media screen and (min-with: 760px) and (max-width: 1024px) and (orientation: landscape) {
  // 宽度介于760-1024之间且处于横屏状态
  .box{width:200px;}
  .title{color:red;}
}

• 调用不同的外部样式表文件；
• 使用不同的样式；
• screen的意思是在告知设备在打印页面时使用[衬线字体]，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印。

1.2 常用参数

• orientation：检测屏幕状态，有两个可选landscape(横屏)以及portrait(竖屏)；
• width：浏览器可视宽度；
• height：浏览器可视高度；
• device-width：设备屏幕宽度；
• device-height：设备屏幕高度；
• aspect-ratio：浏览器可视屏幕宽高比；
• device-aspect-ratio：设备屏幕宽高比；
• color：检测颜色的位数，min-color: 32代表检测设备是否有32位色；
• resolution：检测分辨率，比如min-resolution: 300dpi；
• grid：检测输出的设备是网格的还是位图设备。

2. 开发步骤

2.1 设置meta标签

• width = device-width：宽度等于当前设备的宽度
• height = device-height：高度等于当前设备的高度
• initial-scale：初始的缩放比例（默认设置为1.0）
• minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
• maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
• user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

2.2 IE8以下兼容

2.3 设置IE渲染方式默认为最高

现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8。

// 或者

2.4 CSS2中@media写法

/*
既然CSS2可以实现CSS的这个效果为什么不用这个方法呢，很多人应该会问，但是上面这个方法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。
*/

3. 像素与分辨率

像素和分辨率是两个密不可分的重要概念，它们的组合方式决定了图像的数据量，同样大小的图像，分辨率越高，包含的像素越多。

例如大多数网页制作常用图片分辨率为72，即每英寸像素为72，1英寸等于2.54厘米，那么通过换算可以得出每厘米等于28像素；又如15x15厘米长度的图片，等于420*420像素的长度。

3.1 像素分为数码像素和屏幕像素

• 屏幕像素：指的是显示屏的物理大小，是实实在在的尺寸大小；
• 数码像素：一种虚拟化的数字，没有实际的物理尺寸大小，有1:1/1:1.09/1:1.21等；

3.2 分辨率分为数码图像分辨率与屏幕分辨率(数码打印分辨率)

• 数码图像分辨率Resolution：指这幅图的像素多少，究竟有多少个像素；
• 屏幕分辨率ppi：是指方形屏幕对角线长度有多少个像素点，然后得到1个单位长度有多少个点；

3.3 几种手机的像素与分辨率

1207871-20170907090002663-38239843.png

• iPhone 6s Plus: 1920*1080；
• iPhone 6s: 1334*750；