Web移动端03

PC端网页和移动端网页的不同点

PC屏幕大，网页固定版心

手机屏幕小， 网页宽度多数为100%

视口

使用meta标签设置

-  name="viewport“；    视口
-  width=device-width：视口宽度 = 设备宽度
-  initial-scale=1.0：缩放1倍（不缩放）
-  maximum-scale=1.0：最大放大1
-  minimum-scale=1.0：最小缩小为1
-  user-scalable：禁止用户缩放
复制代码

二倍图

为了在高分辨率下图片不会模糊

流式布局

特点：

• 宽度自适应
• 高度固定

Flex布局

作用

• 避免浮动布局中脱离文档流现象发生

设置方式

• 父元素添加 display: flex，子元素可以自动的挤压或拉伸

主轴对齐方式

• justify-content：flex-start

  • 默认值，从起点开始排列

• justify-content:flex-end

  • 从结束点开始排列

• justify-content:center

  • 居中排列

• justify-content:space-between

  • 两端对齐，中间的子元素之间的间隙相同

• justify-content:space-around

  • 子元素左右之间的间隙一样

• justify-content:space-evenly

  • 子元素之间的间隙都相同

侧轴对齐方式

• align-items:stretch

  • 默认值，拉伸子元素的高度铺满父元素

• align-items:flex-start

  • 默认值

• align-items:flex-end

  • 从底部开始

• align-items:center

  • 垂直方向居中对齐

• align-self

  • 控制某一个弹性子盒子的侧轴对齐方式

作者：森林皮皮龙
链接：juejin.cn/post/704783… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。