vertical-align: middle;设置图片居中
移动WEB开发
视口viewport（显示网页的屏幕区域）
布局视口 layout viewport 字太小，手动缩放网页
视觉视口 visual viewport 左右滑动看
理想视口 ideal viewport
理想视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
物理像素 /物理像素比（DPR）
物理像素 ：屏幕显示的最小颗粒 屏幕分辨率
物理像素比：1px能显示的物理像素点的个数
背景缩放background-size
background-size：宽度 高度；
background-size：宽度；高度等比缩放
background-size：百分比；相对父盒子来说
background-size：contain；一个边顶满盒子，就不在缩放，可能留白/等比缩放
background-size：cover；两个边全部顶满，完全覆盖盒子，可能显示不全/等比缩放
css3移动端盒子模型
box-sizing: border-box;
padding 和border不会撑开盒子
清除高亮：
tap-highlight-color：transparent；
按钮外观亮光效果：
appearance：none；
禁用长时间按页面弹出菜单：
touch-callout：none；
背景渐变
background：-webkit-linear-gradient
移动端开发选择
1.单独制作移动端页面
-
流式布局（百分比布局）
宽度设置为百分比
最大宽度 max-width
最小宽度 min-width
-
flex弹性布局（强烈推荐）
display：flex；加给亲父亲
父元素属性
flex-direction：设置主轴方向 row/column
flex-wrap：wrap（换行）/nowrap（默认不换行）
flex-flow：简写
主轴方向-/子元素是否换行
justify-content：设置主轴上子元素的排列方式
flex-start（默认从左到右）/flex-end（从右往左）/center（中间）/space-around（平分剩余空间）/ space-between（两边贴边，中间平均分配）
align-items设置侧轴上子元素排列方式（只对单行有效）
flex-start（默认从左到右）/flex-end（从右往左）/center（中间）/stretch（拉伸）
align-content：设置侧轴上子元素排列方式（针对多行有效）
flex-start（默认从左到右）/flex-end（从右往左）/center（中间）/space-around（平分剩余空间）/ space-between（两边贴边，中间平均分配）stretch（拉伸）
子元素属性
flex：数字； 分配制定子元素在父元素剩余空间中的比例
align-self：控制子元素里面的单独一个；
order：左右顺序，默认为0，越小越靠左；
-
less+rem+媒体查询布局
导入less样式
@import “common”；
rem
em相对于父元素的字体大小来算
rem相对于html元素的字体大小来算
优点：
可以通过修改html里面的字体大小，整体控制页面中元素大小（宽高，边距，字体大小）。
媒体查询（media query）
@media screen and (max-width: 800px) {
样式代码
}
检测屏幕的尺寸，设置不同的样式
引入资源：针对不同的屏幕尺寸，调用不同的css文件
less css的预处理语言
变量
@变量名：值；区分大小写
使用时带上@；
嵌套
1.子元素样式直接写在父元素里面；
2.伪类/伪元素 前面添加&；
运算
运算符左右空格隔开；
如果两个单位参与运算，以第一个单位为准；
-
混合布局
-
rem + 媒体查询 + less技术
-
flexible.js + rem
引入js文件
body中声明：
min-width: 320px;
max-width: 750px;
width: 10rem;
方便开发查看效果，写入媒体查询
@media screen and (min-width: 750px) {
html {
font-size: 75px!important;
}
}
-
2.响应式页面兼容移动端 Responsive
一套页面可以适配PC端（container）和移动端（container-fluid）
应用场景：适合简单的页面
响应式布局容器：（版心）container
-
媒体查询
手机 <768 width=100%
平板 >=768·992 width=750px
桌面显示器 >=992-1200 width=970px
大桌面显示器 >=1200 width=1170px
-
bootstarp（框架）
偏向用于开发响应式布局、移动设备优先的 WEB 项目。
栅格系统（container容器中）
每一列左右默认15px的内边距
xs/sm/md/lg
列嵌套：加一个row，取消父盒子的padding，高度也设置和父盒子一样
列偏移：
col-md-offset-份数
列排序：
col-md-push-份数 从左往右
col-md-pull-份数 从右往左
响应式工具类：
hidden-屏幕类型（xs/sm/md/lg）
visible-屏幕类型（xs/sm/md/lg）
空格隔开
background（）
transform-origin（）
translate（，）
rotate（，）
scale（，）
来源：https://blog.csdn.net/qq_36893984/article/details/98758144