响应式布局
响应式布局：通过媒体查询，判断终端的分辨率，做出一个可以在不同终端正常展示的网页布局
优点：一个页面可以适配不同终端的显示
缺点：为了实现这一目的我们不得不利用媒体查询写很多冗余的代码，使整体网页的体积变大，应用在移动设备上就会带来严重的性能问题。
响应式布局常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。
1: 布局方式
a、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
b、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。
c、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
d、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。
2: 常见设备尺寸：
大屏幕： >= 1200px
中等屏幕（默认）： >=992px < 1200px
平板(小屏)： >=768px < 992px
手机(超小屏)： <768px;
3: 媒体查询：https://www.runoob.com/cssref/css3-pr-mediaquery.html 用来设置不同屏幕宽度下的样式
device-with:设备屏幕可见宽度
max-width:设备页面最大可见宽度
and后面跟的是条件，条件后面写的是max-width的时候，宽度从大往小写，条件写的是min-width的时候，
宽度从小往大写，建议从小往大写,min-width特点：向下覆盖，向上兼容。
min-width和min-device-width的区别，在min-width在pc和移动端都能相应，min-device-width只能在移动端相应
@media screen and (min-width: 300px) {
div{
width: 100%;
}
}
@media screen and (min-width: 600px) {
div{
width: 50%;
}
}
css样式中使用：
<link rel="stylesheet" media="screen and (max-device-width:800px)" href="a.css" />
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="b.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里面加入
<meta http-equiv="X-UA-Compatible" content="IE=edge">IE优先最新版
<meta name="renderer" content="webkit">双内核时，优先webkit
基本模板
<!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">
<!--[if lt IE 9]>
<script src="./js/html5shiv.min.js"></script>
<script src="./js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<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>
例子：
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
</div>
</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-width: 320px) {
html{
font-size: 16px;
}
}
@media screen and(device-width: 360px) {
html{
font-size: 16px;
}
}
@media screen and(device-width: 375px){
html{
font-size: 18.75px;
}
}
@media screen and(device-width: 386px){
html{
font-size: 19.3px;
}
}
@media screen and(device-width: 411px){
html{
font-size: 25.5px;
}
}
@media screen and(device-width: 414px){
html{
font-size: 20.7px;
}
}
@media screen and(device-width: 768px){
html{
font-size: 38.4px;
}
}
@media screen and(device-width: 1024px){
html{
font-size: 51.2px;
}
}
如果我们拿的设计稿是640px宽的，less里面所有的尺寸都用rem来设置，
因为是分成20份，一份rem就是32px,所有设置的时候要除以32即有几份rem,然后再乘以rem
.item_title{
width: 100%;
height: 70/32rem;
line-height: 70/32rem;
font-size: 28/32rem;
overflow: hidden;
h3{
float: left;
color: #333333;
}
span{
float: right;
color: #888;
}
}
