1.移动web浏览与调试
F12打开手机调试工具—>点击手机图标—>切换到移动调试模式—>选择移动设备型号或调剂移动设备宽度
2.视口 viewport
浏览器显示页面内容的屏幕区域 视口分为布局视口、视觉视口和理想视口
布局视口 layout viewport ios、andriod基本上都将这个视口分辨率设为980px\
视觉视口 visual viewport 用户正在看到网站的区域
理想视口 ideal viewport 移动端最理想的浏览和阅读量来设定 要用meta视口标签
meta视口标签属性：width：宽度设置的是设备的宽度 initial-scale：初始缩放倍数
maximum-scale：用户最大的缩放倍数 minimum-scale：用户最小的缩放倍数
user--scalable：no/0; 是否允许用户缩放页面
3.物理像素（分辨率）与物理像素比
在PC端，1px等于1物理像素 iPhone8里1px等于2个物理像素
物理分辨率是硬件方面的，逻辑分辨率是软件方面的
4.二倍图
准备的图片比实际开发的图片大小大2倍 才不会导致图片模糊
背景缩放：background-size：宽度 高度；只写了一个参数，默认是宽度，没有高度，按等比例缩放 也可以是百分 比，相对于父元素来说的 背景图片准备的盒子宽高是UI给的图的一半
background-size：cover；全覆盖 完全覆盖父盒子，可能有部分背景图片显示不出来
background-size：contain；等比例覆盖 当宽度或高度铺满盒子时，就不再拉伸了
二倍精灵图用法：在pscook里先把精灵图等比例缩放一半，再根据大小测量精灵图的坐标，加background-size：精 灵图原来宽度的一半；
5.移动端开发选择
移动端页面没有版心
单独移动端页面 和PC端页面不同
响应式移动端页面 和PC端页面相同
6.流式布局（百分比布局）
通过盒子的宽度设置成百分比 占不同的百分比
京东移动端布局，body中 width为100%，设置最大宽度和最小宽度
7.less
CSS扩展语言，扩展了CSS的动态特性
less变量 没有固定的值，可以改变 上面定义，下面使用 把变量想象成一个空箱子，里面装的就是值
@变量名：值； 变量名不能包含特殊字符，不能以数字开头，大小写敏感
less编译 需要用easy less插件
less嵌套 子元素直接写到父元素中
.father { .son{} // &表示（本元素）当前选择器，而不是后代选择器 &:hover {} 交集|伪类|伪元素选择器加上& }less运算 在less中写，运算符的左右两侧必须敲空格隔开，两个数参与运算如果只有一个有单位最后的结果就以这个单位为准，如果两个数都有单位而且单位不一样运算的结果以第一个单位为准
