day17-移动端布局&网格布局

第三种布局方式

第一种方式:媒体查询+rem

第二种方式:Vw + rem(推荐

第三种方式:flexible.js -阿里淘宝插件

        -针对于750px的设计图设置
        -阿里系的软件都使用这种适配方式(自动设置dpr)使用方法
        -需要把视口标签删除
        -引入相应的js文件script src-计算方式:物理像素/100 = rem

           1:引入flxible.js插件
                <script src=""></script>

           2:去掉html里面默认的meta标签
                <meta name="viewport" content="width=device-width, initial-scale=1.0">

网格布局的概念:将页面划分为网格 规定元素在网格中的位置

        属性:display

        属性值:grid (网格属性要给父级元素添加)

                - 容器:设置了网格属性的元素

                - 项目:网格布局下面的直接子级元素

网格的属性设置

1.设置网格属性display:grid 默认是没有样式的 可以通过浏览器的控制台点击显示网格线

2.设置网格的宽和高

        - grid-templete-columns 列/宽度

        -