移动Web 第三天

移动端特点

PC端网页和移动端网页的有什么不同

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

视口

• 网页的宽度和逻辑分辨率尺寸相同
• 默认情况下，网页的宽度和逻辑分辨率不同，

百分比布局

流式布局，效果是为了宽度自适应，高度固定

Flex布局

父元素添加 display: flex

组成部分。主轴，侧轴

• 主轴

  • justify-content调节元素在主轴的对齐方式

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

• 侧轴

  • align-items调节元素在侧轴的对齐方式

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

  • align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

\