移动端布局

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

分辨率问题

• 物理分辨率 屏幕本身固定的
• 逻辑分辨率 由软件驱动

在计算分辨率时需要在测量的分辨率基础上%缩放百分比

(1920/125%) * (1080/150%)

视口标签

<mate name="viewport" content="width=device-width,initial-scale=1.0">

将宽度设置为设备逻辑分辨率宽度

	<!-- 视口总结 网页的宽高和电脑不自适应
        电脑网页总结：
        1.笔记本大多数默认的逻辑分辨率是1920*1080 
          电脑网页的显示是根据逻辑分辨率来适应宽高的
        2.网页的内容分是自定义的分辨率大小
        手机端网页总结：
        1.默认情况下手机网页的宽度是980
        2.网页的内容是自定义分辨率的大小
          如果给的图片的大小是逻辑分辨率的大小在放大情况下会显示的模糊
        电脑分辨率：
        缩放不会改变分辨率 但是浏览器仍旧会自适应宽高
        在不缩放的情况下电脑的宽度 是逻辑分辨率的宽度
        改变的电脑的逻辑分辨率是在原物理分辨率下放大了像素，在自适应下会有黑边
        手机分辨率：
        手机的逻辑分辨率和原物理分辨率成比例 
		所以手机的在原分辨率下由逻辑分辨率显示让手机由超级清晰变为很清晰？
		！！！所有的网页布局的内容就是自定义的大小
		！！！除非自适应宽度和流式布局会影响其大小
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

流式布局是使用百分比设置宽高

Flex布局

弹性布局

• 是一种浏览器提倡的布局模型
• 布局网页更简单、灵活
• 避免浮动脱标的问题

Flex模型

felx布局非常适合结构化布局

设置方式 display: flex; 子元素可以自动的挤压或拉伸

组成部分

• 弹性容器 -父盒子
• 弹性盒子 -布局子盒子
• 主轴
• 侧轴 / 交叉轴

主轴对齐

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

属性值	作用
flex-start	默认值，起点开始默认排序
flex-end	重点开始默认排序
center	沿主轴居中排序
space-around	弹性盒子沿主轴均匀排序，空白间距均分在弹性盒子两侧（会堆加）
space-between	弹性盒子沿主轴均匀排序，空白间距均分在相邻两个盒子之间
space-evenly	弹性盒子沿主轴均匀排序，弹性盒子与容器之间间距相等（平均）

侧轴对齐

align-items : 弹性容器属性

align-self : 弹性盒子属性

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

设置了flex布局的弹性盒子 没有设置高度默认是拉伸铺满整个容器 没有设置宽度默认是内容大小

伸缩比

flex: number 占用父盒子剩余宽度的等分

主轴方向

flex-direction

属性值	作用
row	默认值，水平对齐
column	垂直对齐
row-reverse	水平对齐，从右往左
column-reverse	垂直对齐，从下到上

多行排列

flex-wrap

默认值不换行 flex-wrap: nowrap 换行 flex-wrap: wrap

对齐方式

align-content

换了主轴方向的主轴对齐 属性值基本相同

属性值	作用
flex-start	默认值，起点开始默认排序
flex-end	终点开始默认排序
center	沿主轴居中排序
space-around	弹性盒子沿主轴均匀排序，空白间距均分在弹性盒子两侧（会堆加）
space-between	弹性盒子沿主轴均匀排序，空白间距均分在相邻两个盒子之间
stretch	默认值，弹性盒子沿主轴线被拉伸至铺满容器