分辨率就是屏幕上横、纵的总象素点数。
如果我们设计的时候用单位px，可以说是物理分辨率尺寸。
如果我们设计的时候用单位pt，可以说是逻辑分辨率尺寸。
===================================================
默认情况下：手机按照桌面浏览器的分辨率显示,如果要在手机上显示需要加<meta>标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
viewport：
width=device-width 宽度按照设备最合适的走
initial-scale=1.0 初始不缩放
user-scalable=no 禁止用户缩放操作
minimum-scale
maximum-scale
===================================================
禁止设备将疑似手机号/邮箱,进行识别。取消点击拨打电话等事件
<meta name="format-detection" content="telephone=no,email=no"/>
设置浏览器，时候最新的IE和chrome去编译（不是手机端专用，PC网页一般也需要设置）
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
其他几个meta标签，了解即可
1 设置浏览器过期时间，-1表示时刻过期，及每次刷新都要请求最新数据
2 是否设置浏览器缓存，否
3 是否从本机读取缓存文件，否
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
==========================================================
移动端布局：
1.viewport
调整移动端分辨率
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<script>
window.onload = window.onresize = function (){
document.documentElement.style.fontSize = document.documentElement.clientWidth/16+'px';
};
</script>
2.弹性盒模型box-sizing
content-box
border-box 往里挤(怪异盒模型)
3.弹性布局flex
父级：display:flex;
子级：flex:1
子级：flex:2
子级：flex:1
4.媒体查询->响应式布局
@media (条件){
css代码
}
优先级
5.rem
------------------------------------------------------------------
display:flex; 【父级设置了flex属性，子级就会排在一排并自动分配空间，类似于浮动。】
父盒子设置了display:flex,行内元素是可以直接设置宽高
justify-content:设置子盒子的水平排列方式
center;【居中】
flex-start【居左】
flex-end【居右】
space-between【两端对齐】
space-around【两边有间隙的两端对齐】
align-items:设置子盒子的竖直排列方式
center；【垂直居中】
flex-start【居顶】
flex-end【居底】
flex-direction:row;
flex-wrap:wrap;
==========================================================
模拟bootstrap：
1.分12格
2.有4种分辨率
lg 1200
md 992
sm 768
xs 更小
==========================================================
省时的浏览器同步测试工具:
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。
注释：使用时需要打开wamp虚拟服务器，然后在cmd命令行中安装并启动browser-sync
browser-sync
1.安装
*global——全局安装
npm install -g browser-sync
2.切换目录
cd D:/BaiduYunDownload/ate
3.运行browser-sync
browser-sync start --server --files "*.html"
请注意这个命令里的start --server，这其实是BrowserSync自己启动了一个小型服务器。如果简单只是想要监听整个项目，可以写成这样：【browser-sync start --server --files "**"】
===============================================
bootstrap：默认会给.container加伪类
.container:after,.container:before{
content:'';
display:none;
}
--------------------------------------------------
container 默认有padding值
visible-lg-inline-block