1、视口( viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口（原始布局）、视觉视口（能看到的部分）和理想视口（原始布局贴合能看到的部分）
手动添加meta视口通知bom
meta视口标签的主要目的∶布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽
2、PC页面一个像素1px等于一个物理像素，移动端就不同（retina屏幕，物理像素比，如iphone8内像素比为1开发像素：2物理像素）（以前制作的移动端故障上传单，在设计签名板时有碰到过）
在导图时，要使用倍图的方式解决图片放大的问题（像素比为1：2，图片需要50px*50px显示，则准备一个100px*100px图片，手动缩小为50px*50px）
3、背景图片大小：background-size / cover拉伸图片至覆盖整个盒子 / contain图片保持原来比例自适应盒子边缘
4、移动端开发选择：
单独制作移动端页面（pc为www.jd.com 移动端为m.jd.com）根据设备判断：流式布局（百分比布局）、flex弹性布局、less+rem+媒体查询布局、混合布局
响应式兼容pc与移动端，根据屏幕尺寸来改变内容：媒体查询、bootstrap
5、圣杯布局：移动端搜索栏若左右各有控件且空间不缩放，可以考虑空间用定位，搜索栏盒子左右加margin且不给宽度，使其和父系一样宽，在缩放的时候可以自适应大小
6、flex布局：弹性布局
当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
默认主轴x水平向右
默认侧轴y垂直向下
给父系添加的常用属性：
flex-direction: 设置主轴方向 ：row-reverse从右到左/column-reverse从下到上
justify-content: 主轴上子元素排列方式 space-between两边贴边，剩余分配
flex-wrap: 设置子元素是否换行 wrap/nowrap
align-content：设置侧轴上子元素排列方式（多行，单行无效果）
align-items：设置侧轴上子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
给子元素添加的属性：
flex : 加数字，子项weight，类似安卓的weight
align-self: 某一子项侧轴单独控制位置
order：轴的前后位置，和z-index有区别
7、rem布局
rem (root em)是一个相对单位，类似于em , em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。
比如，根元素( html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px.
所以rem的原理就是根据html中根元素文字大小来改变子元素大小，优势是只需要修改一个根大小(媒体查询)，即可改变整体大小
媒体查询(Media Query）是CSS3新语法。
使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
/*媒体特性：在屏幕/打印机/所有 和/非/指定 宽...下的样式为｛｝*/ @media screen/print/all and/not/only (width/max-width/min-width:800){ }
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
媒体样式层叠性优势：
还可引用资源，针对不同屏幕大小调用不同css样式
<link rel="stylesheet" href="1.css" media="screen and (max-width: 640px)">
less：
Less ( Leaner Style Sheets 的缩写）是一门CSS扩展语言，也成为CSS预处理器。
做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
less本质还是css，只是封装好的运算符，html引用的时候引用的还是less编译后的css文件
伪类：如 a：hover == a｛&：hover｝
加减乘除注意事项：
乘号 ( * ) 和除号 ( / ) 的写法
运算符中间左右有个空格隔开1px + 5
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位
rem适配方案：
rem+less+媒体查询
flexible.js+rem