学习笔记---响应式布局

一、添加H5兼容

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

二、引入兼容的js文件(HTML5+CSS3)

<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>

三、IE渲染模式默认设置成最高

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> // 用户电脑里面装了“Google Chrome Frame”插件，就可以让电脑里面的IE使用Webkit引擎及V8引擎进行排版及运算

四、CSS样式代码

 // 页面宽度大于1100px时展示的css样式
@media (min-width: 1100px) {
 .className{
    height: 300px;
    width: 300px;
    background: rgba(255,255,255,1));
    }
}
// 页面宽度小于850px时展示的css样式
@media (max-width: 850px) {
 .className{
    height: 300px;
    width: 300px;
    background: rgba(0,0,0,1));
    }
}
// 页面宽度介于850px和1100px时展示的css样式
@media (max-width: 850px) and (min-width: 1100px) {
 .className{
    height: 300px;
    width: 300px;
    background: rgba(rgba(115,119,130,1));
    }
}