rem+vw布局的原理

vw为响应式单位，为方便计算：

先根据页面总宽度100vw与设计稿的宽度计算出html的font-size为100px,即calc(100vw / 设计稿宽度 / 100)；
由于字号会被继承，所以将body的font-size设为默认的16px,即0.16rem;
用媒体查询@media设置小于最小宽度时的html的font-size值以及大于最大宽度时的html的font-size值，都用px表示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html {
        font-size: calc(100vw / 3.75);
    }
    body {
        font-size: 0.16rem;
    }
    @media (max-width:320px){
        html{
            font-size: 85px;
        }
    }
    @media (min-width:640px){
        html{
            font-size: 170px;
        }
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>

grid属性

容器属性

设置容器为grid布局：display:grid;
设置行列数量（fr为份，自动划分）

设置行 grid-template-rows:repeat(3,1fr)

设置列 grid-template-columns:repeat(3,1fr)

间距 gap

用法：gap:行距列距

排列方式：行/列优先（即横排竖排）

grid-auto-flow:row/column

设置隐式网格的行高
grid-auto-rows:10em

设置隐式网格的列宽
grid-auto-columns:10em

对齐方式：相对容器
place-content:垂直方向水平方向
可选值有（start/end/center/space-between/space-around/space-evenly）

对齐方式：项目相对于网格
place-items:垂直方向水平方向
可选值有（start/end/center）

项目属性

跨区间
grid-area: 行始/列始/行止/列止
针对单个项目
place-self:垂直方向/水平方向
可选值有（start/center/end）
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            display: grid;
            grid-template-rows: 10em minmax(500px,calc(100vh - 20em - 0.6em - 0.6em)) 10em;
            grid-template-columns: 10em minmax(500px,1fr ) 10em;
            gap: 0.5em;
        }
        header,footer{
            background-color: chocolate;
            color: #fff;
            grid-column: span 3;
        }
        main{
            background-color: cyan;
        }
        footer{
            background-color: darkcyan;
            color: #fff;
        }
        aside{
            background-color: rgb(105, 155, 247);
            color: #fff;
        }
    </style>
</head>
<body>
    <header>HEADER</header>
    <aside class="left">LEFT</aside>
    <main>MAIN</main>
    <aside class="right">RIGHT</aside>
    <footer>FOOTER</footer>
</body>
</html>

rem+vw布局的原理与rem的设置技巧

rem+vw布局的原理

grid属性

容器属性

项目属性

更多相关文章

随机推荐