目录
移动端基础
移动端兼容性比较可观，处理兼容性主要处理webkit内核浏览器即可。
可在谷歌浏览器的模拟手机调试（edge 火狐也有选择）
视口（布局视口，视觉视口，理想视口）
1.布局视口 layout viewport
1.一般移动设备的浏览器默认设置了一个布局视口
2.一般为980px
2.视觉视口 visual viewport
3.理想视口 ideal viewport ！！！
meta：自己设置宽度，如上述所述。（动态适应）
meta视口标签
物理像素&物理像素比
1.物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的 如 750*1334
2.PC端页面，1个px等于1个物理像素的，但移动端就不尽相同
3.一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比
二倍图
电脑上两个像素=手机上一个像素！！！
若将一个50*50的图片放到手机端里面放大2倍，100*100 会模糊，
我们采取是放一个100*100的图片，然后改为50*50（准备的图片比实际需要的大小 大2倍，这就是2倍图）
背景缩放background-size
移动端可以全部CSS3盒子模型
PC端若要完全兼容，就用传统模式；若不考虑兼容性，则选择CSS3盒子模型
特殊样式
移动端常见布局
流式布局（百分比布局）
flex布局（不需要浮动）
布局比较灵活
flex（固定定位的盒子要给宽度）
1.操作方便，布局即为简单，移动端应用广泛
2.PC端浏览器支持情况较差
3.IE11或更低版本，不支持或部分支持
可以使元素居中对齐、浮动被淘汰
常见父项属性 对父元素使用
主轴：水平向右（x轴） 侧轴：垂直向下（y轴）
justify-content 设置主轴上子元素排列方式
flex-wrap设置子元素是否换行
flex布局中，默认子元素不换行，如果装不了，则会缩小子元素宽度/高度，放进父盒子里面
align-items设置侧轴子元素排列方式（单行）
align-content设置侧轴子元素排列方式（多行）
单行下是没有效果的
flex-flow是flex-direction和flex-wrap的复合属性
子项flex属性使用【剩余空间】
flex：1（每个盒子占一份）
align-self控制子项自己在侧轴上的排列方式
linear-gradient背景线性渐变
rem适配布局
用途：
1.页面布局文字能随屏幕大小变化而变化
2.流式布局和flex布局主要针对宽度布局，rem适配布局可以针对高度
3.可以让屏幕高度和宽度实现等比例缩放
1.rem单位
1. em是相对父元素 的字体大小来说的【p宽度和高度为120px】 倍数关系
2.rem是相对html元素的字体大小来说的
3.优点：可以实现整体页面控制效果【通过修改html里面的文字大小来改变页面中元素大小】
现在已被放弃了
less基础【css扩展语言】
less 具有运算能力，易维护 官网地址：Less 中文网 (lesscss.com.cn)
1.less变量
自己设置几个变量，然后使用，当需要修改某些值时，可修改这个变量，达到全局修改的形势。
2.less嵌套
普通元素：直接将子元素写在父元素里面
伪元素（伪类、交集选择器） 需要在前面加 &
3.less运算
可直接进行加减乘除
补充：less文件和生成的css文件默认放在一起的。如果需要把css文件单独放在css的目录下，可以在less中配置导出css路径
注意：
1. 运算符的左右必须有空格隔开，否则很容易出现问题
2.两个数参与运算，如果只有一个数有单位，最后结果就以这个单位为准
3.两个数参与运算，如果两个数都有单位，则最后结果就取第一个值的单位为准
4.cssrem插件（直接可转为rem）
默认的html中的字体大小为16px
修改：
vm/vh单位（相对于当前视口来说的）
有了这个单位可以不用媒体查询
vw/vh是一个相对单位（类似em和rem相对单位）
vw： 视口宽度单位
vh：视口高度单位
相对视口的尺寸计算结果
1vw = 1/100 视口宽度
1vh = 1/100 视口高度
百分比是相对父元素来说的 25%
rem 是相对html里面的font-size来说的
em 是相对父元素的font-size来说的
注意事项：
（1）一般使用同一个单位vw就够了，可实现等比例缩放
1755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
