响应式布局

响应式布局：通过媒体查询，判断终端的分辨率，做出一个可以在不同终端正常展示的网页布局

优点：一个页面可以适配不同终端的显示
缺点：为了实现这一目的我们不得不利用媒体查询写很多冗余的代码，使整体网页的体积变大，应用在移动设备上就会带来严重的性能问题。
响应式布局常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。

1: 布局方式

a、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。

b、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。

c、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。

d、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。

2: 常见设备尺寸：

大屏幕：　>= 1200px

中等屏幕（默认）：　>=992px < 1200px

平板(小屏)：　>=768px < 992px

手机(超小屏)：　<768px;

css3-pr-mediaquery.html　　用来设置不同屏幕宽度下的样式

device-with:设备屏幕可见宽度

max-设备页面最大可见宽度

and后面跟的是条件，条件后面写的是max-width的时候，宽度从大往小写，条件写的是min-width的时候，

宽度从小往大写，建议从小往大写,min-width特点：向下覆盖，向上兼容。

min-width和min-device-width的区别，在min-width在pc和移动端都能相应，min-device-width只能在移动端相应

@media screen and (min- 300px) {　
    div{
          100%;
    }
}

@media screen and (min- 600px) {　
div{
50%;
}
}

css样式中使用：

4: 根据该业务用到的css框架：

a: Bootstrap https://www.bootcss.com/

b: element UI https://element.eleme.cn/#/zh-CN

c: Framework7 对苹果手机友好　http://www.framework7.cn/　　https://github.com/framework7io/framework7下载地址 https://www.zybuluo.com/kirkzwy/note/16048

d: Amaze UI http://amazeui.org

5: Bootstrap 移动设备优先，基于less进行预处理，基于jq

可以直接下载码那个，里面包含所有的文件，css, js, fonts 在dist（区域）目录下

根据右侧的浏览器和设备的支持情况，引入相应的 Respond.js 和在head里面加入

基本模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
　　<meta charset="utf-8">
　　<meta http-equiv="X-UA-Compatible" content="IE=edge">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<meta name="renderer" content="webkit">
　　<title>Bootstrap</title>
　　<link rel="stylesheet" href="./css/bootstrap.min.css">
　　
</head>
<body>

<script src="./js/jquery.min.js"></script>
　　<script src="./js/bootstrap.min.js"></script>
</body>
</html>

栅格系统：

行（row）必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中。
列（col）必须包含在行（row）内,只有列（col）可以作为行（row）”的直接子元素。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

向下覆盖，向上兼容，书写顺序应该

xs（超小屏幕手机 (<768px)）
sm（小屏幕平板 (≥768px)）
md（中等屏幕桌面显示器 (≥992px)）
lg（大屏幕大桌面显示器 (≥1200px)）

向下覆盖，向上兼容即:

如果xs，sm，md，lg，设置的都是一样，直接写最小的就行，不用往大了写
在元素上应用任何 .col-md-* 栅格类中等屏幕设备 .col-lg-* 不存在也没关系， md也能影响大屏幕设备。
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"></div> = <div class="col-xs-12"></div>

例子：

offset:偏移 <div class="col-xs-1 col-xs-offset-2">第５列</div>
偏移的距离是以栅格列做为单位,直接把当前列和所有列往后推２列
直接影响后面的元素（内部是通过margin-left属性来实现的）

push(往后定位（当前列加２列处）) <div class="col-xs-1 col-xs-push-2">第５列</div>
pull(往后定位（当前列减２列处）) <div class="col-xs-1 col-xs-push-2">第５列</div>
它是通过定位来实现的，自身的位置会空出来，自己定位到当前列＋/- n列上，和其它元素重叠，但不会影响其它元素的位置

显示隐藏：

.hidden-xs　.hidden-sm　.hidden-md　.hidden-lg　
没有向上兼容，向下覆盖的效果，所以所有的标签最好都要写　
.visible-*-*这个官方基本已经废弃，不要用

6: css预处理脚本－less https://less.bootcss.com/#

离线装less

3: 命令行编译：lessc path/xxx.less path/xxx.css

4: 用下面编译（方便）：

执行nmp install -g -less-plugin-clean-css
ctrl+shift+p打开命令面板
输入install package 然后回车
安装LESS,less,less2Css三个插件
alt+s快捷键即可实现编译

5:使用webstorm, HBuilder直接新建两个文件名一样的less文件和css文件，可以直接编译

HBuilder有问题，改插件配置处的｛

　　"extensions": "less",
　　"key": "ctrl+s",
　　"showInParentMenu": false,
　　"onDidSaveExecution": true

｝这几个值看一下

less文件里面可以引入其他的css文件：

@import "base.css";
@import "./css/fonts.css";

7: rem(如果按照20份进行划分)

@media screen and(device- 320px) {
　　html{
　　　　font-size: 16px;
　　}
}
@media screen and(device- 360px) {
　　html{
　　　　font-size: 16px;
　　}
}
@media screen and(device- 375px){
　　html{
　　　　font-size: 18.75px;
　　}
}
@media screen and(device- 386px){
　　html{
　　　　font-size: 19.3px;
　　}
}
@media screen and(device- 411px){
html{
　　　　font-size: 25.5px;
　　}
}
@media screen and(device- 414px){
html{
　　　　font-size: 20.7px;
　　}
}
@media screen and(device- 768px){
　　html{
　　　　font-size: 38.4px;
　　　}
}
@media screen and(device- 1024px){
　　html{
　　　　font-size: 51.2px;
　　}
}

如果我们拿的设计稿是640px宽的，less里面所有的尺寸都用rem来设置，

因为是分成20份，一份rem就是32px,所有设置的时候要除以32即有几份rem,然后再乘以rem

.item_title{
　　 100%;
　　height: 70/32rem;
　　line-height: 70/32rem;
　　font-size: 28/32rem;
　　overflow: hidden;
　　h3{
　　　　float: left;
　　　　color: #333333;
　　}
　　span{
　　　　float: right;
　　　　color: #888;
　　}
}

响应式布局

响应式布局：通过媒体查询，判断终端的分辨率，做出一个可以在不同终端正常展示的网页布局

3: 媒体查询：https://www.runoob.com/cssref/css3-pr-mediaquery.html 用来设置不同屏幕宽度下的样式

3: 媒体查询：https://www.runoob.com/cssref/css3-pr-mediaquery.html　　用来设置不同屏幕宽度下的样式　