移动Web

移动端特点

PC端与手机端的不同：

• pc端屏幕大，网页固定版心
• 手机端屏幕小，网页宽度多为100%

分辨率：

• 物理分辨率是生产屏幕时就固定的，不可被改变
• 逻辑分辨率由软件（驱动）决定

视口：

• 使用meta标签设置视口宽度，制作适配不同设备宽度的网页

百分比布局

• 也称流式布局
• 宽度自适应，高度固定

flex布局

• 也称弹性布局：是一种浏览器提倡的布局模型，布局网页更简单、灵活，避免浮动脱标问题
• 语法：父元素添加display:flex，子元素自动挤压或拉伸
• 组成部分：
  1. 弹性容器（父元素）
  2. 弹性盒子（子元素）
  3. 主轴（x轴，默认水平）
  4. 侧轴/交叉轴（y轴，默认垂直）

主轴对其方式
目标：使用justify-content调节元素在主轴的对其方式

• 修改侧轴对齐方式属性
  • justify-content

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

侧轴对其方式
目标：使用align-item调节元素在侧轴的对其方向

• 修改侧轴对齐方式属性
  • align-item（添加到弹性容器，整体控制，加给父级）
  • align-self（添加到弹性盒子，单独控制，加给子级）

属性值	作用
flex-star	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值，弹性盒子沿着主轴线被拉伸至铺满容器

伸缩比
目标：使用flex属性修改弹性盒子伸缩比

• 语法：flex：数值（整数）
• 注意：只占用父盒子剩余尺寸