rem+vw布局的原理

vw為響應式單位，為方便計算：

先根據(jù)頁面總寬度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">PHP中文網</div>
</body>
</html>

grid屬性

容器屬性

設置容器為grid布局：display:grid;
設置行列數(shù)量（fr為份，自動劃分）

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

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

間距 gap

用法：gap:行距列距

排列方式：行/列優(yōu)先（即橫排豎排）

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）

項目屬性

跨區(qū)間
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>

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網理性發(fā)言，請遵守新聞評論服務協(xié)議

0條評論

作者最新博文

Ement常用語法、元素四類屬性、布局標簽、div+class與 html5語義化標簽的優(yōu)缺點

2021-12-22 23:47:07

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

rem+vw布局的原理

grid屬性

容器屬性

項目屬性