rem文字适配与Flex布局

rem文字适配

效果图：当我们重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

rem是一个相对根元素字体大小的单位。

html{
      font-size: 12px; //根元素字体大小为12px
  	 }


p{
     font-size: 2rem; //p元素的字体大小为24px
  }

em单位：实际大小就是父元素字体大小的倍数

                2em=2*font-size=2*12px

 rem root：根元素的字体大小作为基准

媒体查询格式：

@keyframes

@media  媒体类型 (常用screen) and 媒体特性 {

                css代码

            }

定义和使用：

• 使用 @media 查询，可以针对不同的媒体类型定义不同的样式。
• @media 可以针对不同的屏幕尺寸设置不同的样式，如果我们需要设置设计响应式的页面，@media 是非常有用的。
• 当我们重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

Flex布局

Flex翻译为“弹性”，通过给元素设置display属性，属性值为flex或者inline-flex。使其变成弹性容器，容器中的直系子元素就会变为弹性元素。

div{
     	 
    display: flex;//变成弹性盒
  }

布局父项常见属性：

属性	作用
flex-direction	设置主轴的方向。       row：默认值，元素从左到右依次排列       row-reverse：元素从右到左依次排列       column：元素从上到下依次排列       column-reverse：元素从下到上依次排列
justify-content	设置主轴上的子元素排列方式。         left         right         flex-start         flex-end         space-around：空白环绕四周         space-between：空白在子元素中间平均分配
flex-wrap	设置子元素是否换行。         nowrap:不换行          wrap:换行
align-content	设置侧轴上的子元素的排列方式（多行）。        flex-start        flex-end        center        space-around        space-between
align-items	设置侧轴上的子元素排列方式（单行）        center        flex-start        flex-end
flex-flow	复合属性，相当于同时设置了 flex-direction 和 flex-wrap

布局子项常见属性：

属性	作用
flex	元素占的份数
align-self	控制子项自身在侧轴的排列方式
order	设置自身的排序顺序（前后顺序）