@[toc]

前言

本篇博客是关于CSS的响应式布局，若文章中出现相关问题，请指出！

所有博客文件目录索引：博客目录索引(持续更新)

响应式布局

@media学习

使用@media目的：让网站进行自适应，对移动端设备访问页面友好，适应各种窗口类型，根据屏幕宽度来判断输出使用不同的css样式。

前提准备

①添加media标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

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

②加载兼容文件JS：IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果

<!--[if lt IE 9]>
  <!--加载两个js文件保证兼容效果-->
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

③设置IE浏览器渲染方式默认为最高(自由选择是否添加)

现在大多电脑IE浏览器升级到IE9，但是浏览器文档是IE8，为了保证使用最新文档IE9，使用如下meta标签：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

也可以使用下面标签，添加了一个字段chrome=1"，其效果就是若是用户电脑安装了Google Chrome Frame（谷歌内嵌浏览器框架GCF） 插件，此时若是使用IE浏览器不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算。

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

@media使用

位置：写在css文件中。

最常见的写法：

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

• 其中的screen表示设备在打印该页面时使用衬线字体，在屏幕上显示时用无衬线字体，一般可以不使用该关键字。

混合写法：可设置区间范围如960-1200区间

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}