17_网格布局

JRealcs

已于 2022-12-30 22:20:55 修改

阅读量92

点赞数

分类专栏： HTML5+CSS3 文章标签： html css css3

于 2022-07-27 23:31:22 首次发布

本文链接：https://blog.csdn.net/weixin_58764638/article/details/126025402

版权

HTML5+CSS3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、第二种移动端布局方式

第二种移动端布局:vw
一.vw单位是什么:viewport width 视口宽度

二.vw换算方式:1vw=视口宽度的百分之一/100vw=视口的100%

三.vw和%单位之间的区别

vw单位是视口单位,看到多少vw就会显示多少
百分比单位是是浏览器单位
滚动条在pc端是占位置,在移动端不占位置(vw建议在移动端使用)

四.关于vw单位计算移动端布局的推算思路(了解)

在浏览器中100vw和浏览器的宽度是一样的,ui设计图也可以看成是和浏览器大小是一样(dpr比例)
可以得到100vw/ui设计图的大小=在浏览器中所占的每一份的大小
量取设计图中每一个元素的大小*上面的到的每一份大小

五.由于移动端设计图需要考虑dpr设备像素比

第一种情况:当设计图的宽度是640px,dpr是2
- 100vw = 640px/2
- 100vw = 320px
- 1vw = 3.2px
- 1px = 0.3125vw
- 表示当前1px占据浏览器的0.3125vw,那么在设计图量取出来的px直接乘以当前一份的大小
第二种情况:当设计图的宽度是750px,dpr是2
- 100vw = 750px/2
- 100vw = 375px
- 1vw = 3.75px
- 1px = 0.2667vw
- 表示当前1px占据浏览器的0.2667vw,那么在设计图量取出来的px直接乘以当前一份的大小

六:关于vw实现移动端的总结

在工作中标准的ui设计图宽度都是750px,考虑dpr是2
导航的高度是88px,高度如何设置呢 88/2=44px * 0.2667vw
底部的高度是90px,高度如何设置呢 90/2=45px * 0.2667vw
由于每次的量取的设计图大小都要乘以0.2667vw很麻烦考虑可不可以让量取出来大小自己去计算呢?
考虑将得到的44px/45px,直接改写为44rem/45rem
将根元素html{font-size:0.2667vw}

二、HTML中的框架标签

<style>
        html,body{
            height: 100%
        }
        iframe{
            width: 100%;
            height: 100%
        }
    </style>

<body>
    <!-- 和a标签的作用类似 src -->
    <iframe src="https://swiper.com.cn/demo/030-pagination.html" frameborder="0"></iframe>
    <!-- 
        优点:可以直接使用在线的地址
        缺点:没有网络、修改内容、搜索引擎是搜索不到的、卡顿
     -->
</body>

三、网格布局的使用

    <style>
        section{
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            /* 形成网格布局属性 */
            display: grid;
            /* 宽高属性:有几个属性值就会有几行几列 */
            /* 宽度 */
            grid-template-columns:1fr 1fr 1fr ; 
            /* 高度 */
            grid-template-rows:1fr 1fr 1fr  ;
            /* 区域划分:给所有的子级元素取别名 */
            grid-template-areas: 
            "a1 a2 a3"
            "a4 a4 a6"
            "a7 a8 a9"
        }
        div{
            border: 1px solid #000000;
        }
        .box{
            background: pink;
            /* 和父级相对应的 */
            grid-area: a4
        }
    </style>

<body>
    <section>
        <div>1</div><div>2</div><div>3</div>
        <div class="box">4</div><div>6</div>
       <div>8</div><div>9</div>
    </section>
</body>

四、百度风云榜

    <style>
        section{
            width: 400px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            display: grid;
            padding: 10px;
            /* grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas: 
            "a1 a2 a2"
            "a3 a2 a2"
            "a4 a4 a5"
            "a6 a7 a7" */
            grid-template: 
            "a1 a2 a2" 1fr
            "a3 a2 a2" 1fr
            "a4 a4 a5" 1fr
            "a6 a7 a7" 1fr
            /1fr 1fr 1fr;
            /* grid-column-gap: 10px;
            grid-row-gap: 10px; */
            grid-gap: 10px 10px
        }
        div:nth-child(1){
            grid-area: a1;
            background: red;
        }
        div:nth-child(2){
            grid-area: a2;
            background: pink;
        }
        div:nth-child(3){
            grid-area: a3;
            background: green;
        }
        div:nth-child(4){
            grid-area: a4;
            background: purple;
        }
        div:nth-child(5){
            grid-area: a5;
            background: yellow;
        }
        div:nth-child(6){
            grid-area: a6;
            background: skyblue;
        }
        div:nth-child(7){
            grid-area: a7;
            background: orange;
        }
    </style>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>