.CSS 移动端

移动端和PC端网页区别

移动端

移动端手机或平板屏幕较小，网页宽度几乎填满整个屏幕宽度。屏幕内容显示先对PC端相对较少，大部分情况需要下拉页面才能浏览完整页面。
移动端因为是新兴产业，所以基本不用考虑兼容性等问题。可以大胆使用css新特性。

PC端

PC端因为发展时间较长，浏览器繁多则需要更多的去考虑兼容性问题。
PC端的屏幕远大于移动端，且大部分网页会有固定版心，不会填满整个屏幕宽度。

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。

视口的分类：

1. 布局视口 。 iOS, Android基本都将这个视口分辨率设置为980px。

2. 视觉视口。用户正在看到的网站的区域。

3. 理想视口。 设备有多宽，我的网页就显示有多宽

移动端一般使用理想视口将网页宽度化为移动端设备宽度

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

• width=device-width：视口宽度=设备宽度

• initial-scale=1.0：初始页面缩放倍数

• maximum-scale=1.0 最大缩放倍数

• user-scalable=0 不允许用户缩放页面（移动端） 或者为 no 如果为 yes 则允许用户缩放
  
   

二倍图

在实际开发场景里还有三倍图甚至四倍图等，多倍图，但是现在市场还是二倍图偏多，我们称为二倍图。简单理解，二倍图存在就是为了让页面中图片更加清晰，遵循即可。

1. 网页美工的设计稿基本是 750px

2. 我们前端工程师拿到设计稿利用像素大厨选择 2X， 进行缩小一半，按照提示的单位开发即可。

flex弹性布局

弹性布局(flex container)，页面中任何一个元素只要设置了display:flex属性，那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。

flex布局

• 操作方便，布局及其简单,移动端使用比较广泛
• pc端浏览器支持情况比较差
• IE11或更低版本不支持flex或仅支持部分

flex主轴对齐方式

flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

flex侧轴对齐方式

flex-start	起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器