我的前端自学之路2020/12/30移动端

移动WEB开发
目前国内的移动端浏览器基本是根据webkit修改来的内核，所以兼容移动端的主流浏览器，处理webkit内核即可。
常见移动端屏幕尺寸以及dpr

视口viewport
就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。
理想视口：idea viewport
为了使网站在移动端有最理想的浏览和阅读宽度而设定，需要手动填写meta视口标签来通知浏览器操作，mata视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽。

meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width 宽度为设备宽度
user-scalable=no 禁止用户缩放
initial-scale=1.0 初始比例为1倍（无缩放）
maximum-scale=1.0最大缩放比例1倍
minimum-scale=1.0最小缩放比例1倍

物理像素和物理像素比

物理像素点指的是屏幕尺寸的最小颗粒，是物理真实存在的，简单来说就是屏幕的分辨率，如800X600，就是指屏幕高、宽各自最多能放600和800个物理像素点。
在PC端，1px=1物理像素点，但是在移动端就不尽相同的。1px能显示的物理像素点的个数，称为物理像素比（dpr）。

多倍图

移动端常用特殊样式
1 .CSS3盒子模型：-webkit-box-sizing：border-box；
2 .清除链接点击高亮：-webkit-tap-highlight-color：transparent；
3 .IOS浏览器按钮和输入框开启自定义样式：-webkit-appearance：none；
4 .禁用长按弹出菜单：img,a{ -webkit-touch-callout： none }

移动端常见布局
1 .流式（百分比） 通过设置盒子的宽度为百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。

2 .flex布局 flexible Box,弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
当父元素指定为flex布局后，子元素的float、clear、vertical-align属性将失效。

父项常见属性：

flex-direction：row/colum；设置主轴为横向（x）或者纵向（y），默认主轴为x轴
row-reverse横向反转排列
colum-reverse竖向反转排列

justify-content：设置主轴上子元素的排列方式
flex-start 默认值，从头部开始，顺序排列
flex-end 从尾部开始，反向排列
center 在主轴上居中排列
space-around 评分剩余空间
space-between 先两边贴边，再平分剩余空间

flex-wrap：wrap/nowrap；设置主轴上子元素是否换行，默认为不换

align-content：设置侧轴上子元素的排列方式（多行）
一定要先换行
space-around 项目在侧轴平分剩余空间
space-between 项目在侧轴先分布在两端 再平分剩余空间

align-items：设置侧轴上子元素排列方式（单行）
flex-start 默认值，从上到下
flex-end 从下到上
center 垂直居中
stretch 拉伸（项目不要给高度）
flex-flow：row wrap;复合属性，相当于同时设置了flex-direction和flex-wrap

子项常见属性：
flex：1； 子项所占有的份数
align-self：控制子项自己在侧轴的排列方式，允许单个项目和其他项目有不一样的对其方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
order：定义子项的前后顺序