响应式布局

div.container - 定宽容器

LG:1170px MD:970px SM: 750px XS:100%

div.container-fluid - 变宽容器

width:100%

针对不同媒体或屏幕尺寸执行不同的CSS文件

<link media="print" rel="stylesheet" href="css/print.css"/>

 <link media="screen" rel="stylesheet" href="css/screen.css"/>

  <link media="screen and (min-width:992px)" rel="stylesheet" href="css/pc.css">

如何编写响应式网页？——整个阶段的最重点！！

  (1)必须声明viewport元标签

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

  (2)容器尽量使用相对尺寸

尽量避免绝对尺寸：  div.container{  width: 500px;  }

使用相对尺寸代替：  div.container{  width: 80%;  }

  (3)文字大小尽量使用相对尺寸

尽量避免绝对尺寸：  .text { font-size: 12px; }

使用相对尺寸代替：  .text { font-size: 0.8rem;}

  (4)图片尽量使用相对尺寸

尽量避免绝对尺寸：  img { width: 200px; }

使用相对尺寸代替： img { width: 50%;}  指定在父容器中的宽度占比，可以随着父容器无限变大

img { max-width: 50%; } 指定在父容器中的宽度占比，同时还不能超过自己的原始大小

  (5)页面布局尽量采用流式布局(Fluid)

float:left;   或  display:inline-block;

  (6)响应式网页必须CSS3 Media Query技术！

媒体查询具体有两种使用方法：

 (1)有选择性的执行符合条件的外部CSS文件

<link media="screen and (min-width:768px) and (max-width:991px)"rel="stylesheet" href="css/pad.css">

缺陷：即使不满足当前浏览器条件的CSS文件，也会被浏览器请求。

 (2)有选择性的执行CSS片段中的部分内容

@media screen and (min-width: 768px) and (max-width: 991px) {

  h3 {

    display：none

  }

}