响应式布局的基础知识

响应式设计(布局)：

出发点挺好，实际用起来非常不方便

1.大多数手机width=320px

2.大多数pad的width=1024px

媒体查询缺点：

1.流量非常浪费

2.少部分手机的分辨率不统一——非常乱

3.除了媒体查询，有更简单的方法——没必要media  媒体查询

@media screen ......

@media screen and (max-width:380px){
   div{background:red;}
}
@media screen and (min-width:381px) and (max-width:680px){
   div{background:green;}
}
@media screen and (min-width:681px){
   div{background:blue;}
}

max-width:最大的宽度

min-width:381px     最小的宽度381px

link标签也能用media：屏幕、打印机

响应式引入样式的写法1：

<link rel="stylesheet" href="phone.css" media="screen and (max-width:380px)" />
<link rel="stylesheet" href="pad.css" media="screen and (min-width:381px) and (max-width:680px)" />
<link rel="stylesheet" href="pc.css" media="screen and (min-width:681px)" />

响应式引入样式的写法2：

注意：中间可以省略screen and 不写

@import url("phone.css") screen and (max-width:380px);
@import url("pad.css") (min-width:381px) and (max-width:680px);
@import url("pc.css") screen and (min-width:681px);

响应式引入样式的写法3：（实用简洁）

先在html页面引入一个main.css的样式表

<link rel="stylesheet" href="main.css" />

然后main.css里面在进行引入：

@charset "utf-8";
/* CSS Document */
@import url("phone.css") screen and (max-width:380px);
@import url("pad.css") screen and (min-width:381px) and (max-width:680px);
@import url("pc.css") screen and (min-width:681px);