移动web前端基础知识三(部分) 弹性布局上

一.视图 viewport

1. 视口（viewport）就是浏览器显示页面内容的屏幕区域
2. 布局视口: iOS, Android基本都将这个视口分辨率设置为980px
3. 视觉视口:用户正在看到的网站的区域
4. 理想视口: 设备有多宽，我的网页就显示有多宽 (目标)

1.1 视口标

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

• width=device-width：视口宽度=设备宽度
• nitial-scale=1.0：初始页面缩放倍数
• maximum-scale=1.0 最大缩放倍数
• user-scalable=0 不允许用户缩放页面（移动端） 或者为 no 如果为 yes 则允许用户缩放

1.2 二倍图

1. 简单理解，二倍图存在就是为了让页面中图片更加清晰，遵循即可
2. 我们前端工程师拿到设计稿利用像素大厨选择 2X， 进行缩小一半，按照提示的单位开发即可

二.flex布局 (弹性布局 display: flex )

display: flex;  一定要给父元素加,父元素转换为弹性容器,子元素变为元素盒子

2.1 主轴对齐方式 (justify-content),红色字体重点    一定是给父元素加

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列