响应式布局

响应式布局常用的方法

弹性布局 display : flex

当给父盒子设置display:flex 属性后 那么这个盒子就会变成伸缩盒子 在这个盒子中的每一项都被称为伸缩项 在不设置其他属性时 盒子里的内容默认在一行排列
可以通过给伸缩项设置 flex:1 属性 来规定 每一项盒子所占父元素的多少

rem 布局

rem : 长度单位 相对于html根元素的font-size 的倍数计算的
eg: 根元素 设置 font-size=16px 那么 1rem=16px
当设置元素具体的大小时 不给具体的px值 而是 计算 相对的rem来设置大小

百分比布局

不给元素设置具体的数值 而是 设置为相对于父元素的百分比格式 也不是所有的元素都要设置为百分比 像一些按钮还有一些产品图片的样式 和一些小图标 就可以设置为具体的数值

媒体查询

媒体查询(Media Queries)能在不同大小的屏幕下显示不同的样式
使用媒体查询 必须使用关键字 @media screen and （屏幕大小）{}

/*宽度小于768  max-width: 768px:说明当前屏幕的最大值为768px,也就意味着条件就是屏幕的宽度需要小于768px*/
@media screen and (max-width: 768px){
            body{
                background-color: green;
            }
        }
<!--媒体查询是来设置不同屏幕宽度下的  样式-->
<!--需求：
默认情况下，body的背景色：red
w<768  green
w:768~992  blue
w:992~1200 pink
w>1200:purple-->