响应式开发
网页布局方式
1、固定宽度布局
为网页设置固定宽度
2、流式布局
为网页设置相对宽度，通常以百分比做长度单位
3、栅格化布局
将网页平分成均等长度，然后排版布局时则以这些均等长度作为度量单位
4、响应式布局
通过检测设备信息，决定网页布局方式 则用户采用不同设备访问同一网页，可能会看到不一样的内容，一般是根据设备屏幕来实现的
响应式开发可以满足不同尺寸的终端设备非常完美展示内容，但是不得不利用媒体查询写很多冗余代码，使得网页体积变大。应用在移动端上时会带来严重问题，响应式布局常用于企业官网，博客，新闻资讯
一般建议划分
媒体查询
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
上述代码分析如下：
（1）.link元素的media属性用来规定上述CSS代码应用的媒体类型。
（2）.screen表示对应CSS文件应用于显示设备。
（3）.all表示对应CSS文件应用于所有媒体设备.
（4）.print表示对应CSS文件应用于打印机。
（5）.即便当前媒体不符合要求，也会下载对应的CSS文件，只是不应用。
media属性也可以用于<style>元素，规定当前css代码应用的媒体类型，本文就不再演示。
CSS3之后，媒体查询功能得到了增强，不但可以查询媒体类型，而且还可以查询媒体的相关属性。
比如可以根据当前浏览器视口的尺寸的大小，来应用不同的CSS代码或者CSS文件。
二.媒体类型与媒体属性：
上文已经介绍，CSS3媒体查询只能区分媒体类型，CSS3得到了进一步加强，可以区分媒体的属性。
下面罗列一下当前媒体查询常见的媒体类型与媒体属性：
1.媒体类型：
（1）.screen：显示屏幕，比如电脑、手机或者pad屏幕。
（2）.tty：电传打字机已经等宽字符网格类的设备。
（3）.tv：电视等类型的设备。
（4）.projection：投影仪等设备。
（5）.handheld：一些手持设备。
（6）.print：打印机。
（7）.braille：盲人专用的一些设备。
（8）.aural：语音合成器。
（9）.all：表示适用于所有设备。
2.媒体属性：
媒体属性是针对媒体类型的一种细化，比如同是screen显示器设备，但是规格会有所不同。
比如显示区域的尺寸不同，再比如显示器中浏览器视口可以调整到不同的尺寸。
主要媒体属性列举如下：
（1）.宽度属性：width | min-width | max-width。
（2）.高度属性：height | min-height | max-height。
（3）.设备宽度：device-width | min-device-width | max-device-width。
（4）.设备高度：device-height | min-device-height | max-device-height。
（5）.视口宽高比：aspect-ratio | min-aspect-ratio | max-aspect-ratio。
（6）.设备宽高比：device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio。
（7）.颜色属性：color | min-color | max-color。
（8）.颜色索引属性：color-index | min-color-index | max-color-index。
（9）.黑白属性：monochrome | min-monochrome | max-monochrome。
（10）.方向属性：orientation。
（11）.分辨率属性：resolution | min-resolution | max-resolution。
（12）.网格属性：grid。
上面当前主要的媒体属性，有些属性实在是不太常用，甚至一辈子都不会用到。
所以后面的代码实例只会简单演示一些常见的媒体属性
语法介绍
媒体查询有两张应用场所，一种用在<link>与<style>元素之上，一种是CSS代码内部。
下面抛开媒体查询具体的语法不谈，首先演示一下使用场所
<style media="screen and (max-width:1000px)" > div{ color:red; } </style>
and跟前后（）要留个空格
通过media属性规定媒体查询的具体内容，对于<link>标签也是同样的道理。
上述代码规定必须是显示器屏幕且视口尺寸小于等于1000px时候，能够将div字体颜色设置为红色
@media screen and (max-width:1000px){ div{ color:red; } }
上述代码应用于CSS代码内部，功能与前面的完全一样，以@media作为媒体插件的语法标记。
具体语法分析如下：
当媒体查询为true时，就会应用对应的CSS样式。
无论是通过media还是@media规定媒体查询，语法都一致，且媒体属性一定要用小括号包裹。
媒体查询中有如果敢逻辑操作符，在构建多条件查询的时候非常有用，属于语法的一部分。
但是考虑到比较重要，下面单独拿出来进行一下详细介绍。
四.逻辑操作符：
媒体查询中有四个逻辑操作符，分别是and、not、or和only，下面分别介绍一下它们的作用。
媒体查询的细节--重点理解和掌握 （前提是判断最小值，并且从小到大进行判断.如果是判断最大值，就应该从大到小写
1.向上兼容：在窄屏设置的样式。默认在大屏也会存在
2.向下覆盖：宽屏的样式设置会覆盖窄屏的样式设置
单个条件才会向上兼容 或向下覆盖
1.and操作符：
与JavaScript中的逻辑与操作符一个道理，比如两侧的条件都满足时，才会返回true。
代码片段如下：
@media screen and (min-width:800px) and (max-width:1200px) { div{ color:red; } }
上述代码规定当前媒体必须满足如下条件，才会将div颜色设置为红色：
（1）.媒体类型必须是screen，也就是必须是显示器，比如电脑或者手机登。
（2）.视口的尺寸必须大于等于800像素，小于等于1200像素，比如调整浏览器视口到此尺寸。
特别说明：如果操作符不是not或者only，那么媒体类型是可选的，如果省略，那么默认值是all。
所以上述代码可以修改如下：
@media (min-width:800px) and (max-width:1200px) { div{ color:red; } }
将媒体类型screen省略掉，功能没有什么变化。
2.not操作符：
此操作符用于对一个媒体查询语句进行取反操作，类似于JavaScript中的逻辑非运算符。
代码片段如下：
@media not screen and (min-width:800px) and (max-width:1200px) { div{ color:red; } }
对上述代码分析如下：
（1）.not是对整个媒体查询语句的一个取反，而不是对某一个媒体属性取反。
（2）.所以上述代码等同于@media not( screen and (min-width:800px) and (max-width:1200px))。
3.or操作符：
与JavaScript逻辑或操作符相同道理，只要两侧满足一条，那么整个媒体查询语句返回值为true。
代码片段如下：
@media (max-width:500px) , (orientation: landscape) { div{ color:red; } }
特别说明：or操作符用逗号表示，否则会报错。
只要满足视口宽度小于等于500像素或者横屏的任意一条，那么div字体颜色就会被设置为红色。
4.only操作符：
此操作符可能未来就会被淘汰了，它是为了兼容低版本的浏览器而存在的。
随着软硬件的发展进步，它可能就逐步失去存在的意义，下面简单介绍一下。
看如下代码片段：
media="screen and (max-width:1000px)"{...}
较为老式的浏览器可能不支持媒体属性相关的媒体查询，上面的代码并没有打算给这些浏览器使用。
但是在这些较为老式的浏览器中，上述代码实质上会被解析为如下代码：
media="screen"{...}
因为较为老式的浏览器支持media="screen"，所以上述CSS代码会老式浏览器中生效。
下面通过only操作符对上述代码进行一下修改：
media="only screen and (max-width:1000px)"{...}
上述代码在较为老式的浏览器中被解析为如下代码：
media="only "{...}
但是并没有一种叫做"only"的媒体类型，所以CSS代码就不会被应用。
五.媒体属性
媒体属性比较多，下面只介绍一些比较常用的几种。
且大多数支持min-或者max-前缀，比如与width属性关联的属性还有min-width和max-width。
为了节省篇幅和时间，只以width属性为例子进行介绍，其他属性也是如此。
（1）.内容显示区域宽高比
aspect-ratio属性描述了内容输出区域的宽高比，属性值是以斜杠（/）分隔的整数。
代码片段如下：
@media (aspect-ratio: 1/2) { div{ color:red; } }
（2）.设备宽高比：
和内容区域宽高比比较相似，属性值格式相同。
关于它们之间的区别，以电脑端为例子，显示器屏幕宽高比就是设备宽高比。
但是浏览器客户区的宽高比就是内容内容宽高比，是不是很容易理解了
@media (device-aspect-ratio:16/9) { div{ color:red; } }
（3）.内容高度与内容宽度：
height与width描述了媒体内容输出区域的高度和宽度，比如浏览器客户区的高度和宽度。
@media (height:800px) { div{ color:red; } }
（4）.设备高度与设备宽度：
device-height与device-width描述了设备的高度和宽度，比如显示器屏幕的高度和宽度。
@media (device-width: 1200px) { div{ color:red; } }
（5）.方向:
orientation规定了设备是处于横屏状态还是竖屏状态。
具有两个属性值，landscape表示横屏，portrait表示竖屏。
@media (orientation: portrait) { div{ color:red; } }
响应式轮播
移动端 width<768px a标签包裹img标签 a标签设置width：100% display:block img标签设置 width:100% display:block;
非移动端 w>=768px 不用img标签 直接设置a标签width：100% display：block;高度 图片居中 background-position：center center;
图片铺满 background-size:cover; 给每个a标签设置不同背景 就实现了pc轮播
浙公网安备 33010602011771号