移动布局/grid布局

移动布局

布局视图:网页的宽度
视觉视图:移动设备看到的宽度
width=device-width[width:页面布局的宽度|device-width:视觉视图的宽度,设备宽度]
initial-scale=1.0[1:1还原视觉视图的布局]
设计稿750px,DPR=2 device-width = 750px/DPR = 750/2 = 375px 以375布局

下面计算rem

html{
font-size:calc(100vw / 3.75);
}
body {
/* 还原浏览器字号 */
font-size: 0.16rem;
}

grid容器(网格布局)

父级设置

设置grid元素

display:grid;
设置列数
grid-template-columns:10em 10em 10em;
grid-template-columns:repeat(3,1fr);
设置行数
grid-template-rows:10em 10em 10em;
设置间距
gap:行间距列间距
对齐(整个容器居中)
place-content:垂直方向水平方向;
单元格对齐
place-items:垂直方向水平方向;
隐式网格:超出网格的项目
设置隐式网格排列方式[row横排列|column纵排列]
grid-auto-flow:column|row;
设置隐式网格纵排列大小
grid-auto-columns:10em;
设置隐式网格横排列大小
grid-auto-rows:10em;

子级设置

网格区域(span 跨越几行)

grid-row:起始行/结束行;
grid-row:1/2;
grid-row:1 / span 2;//跨越两行
grid-column:起始列/结束列;
grid-column:1/2;
grid-column:1 / span 3;//跨越三列
简写
grid-area:行开始/列开始/行结束/列结束;
grid-area:3 / 1 / 4 / 4 ;
grid-area:3 / 1 / span 1 / span 3 ;
单独设置对齐模式
place-self:垂直方向水平方向;

案例


<!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>
:root{
    --color1:#9d9d9d;
    --color2:#ffffff;
}
* {
    padding:0;
    margin:0;
    box-sizing:border-box;
}
html{
    font-size:100px;
}
body{
    font-size:0.16rem;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:minmax(calc(100vh - 0.4em - 2.5em),1fr) 2.5rem;
    place-content:center;
}
a{
    color: unset;
    text-decoration: none;
}
li{
    list-style: none;
}
.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}
header{
    background-color: #222;
    border-color: #080808;
    position: fixed;
    width: 100vw;
}
/* 导航 */
nav{
    display: flex;
    place-content: space-between;
    line-height: 0.4rem;
}
nav ul li{
    color:var(--color1);
    font-size:0.14rem;
    padding: 0 0.1rem;
}
nav ul:nth-of-type(1){
    display: flex;
}
nav ul:nth-of-type(1) li:nth-of-type(1){
    font-size:0.16rem;
}
.navbar{
    display: none;
}
/* 广告 */
.banner{
    margin-top: 0.35rem;
    background: linear-gradient(45deg,#020031,#6d3353);
    padding: 1rem;
    text-align: center;
}
.banner div h1{
    color:var(--color2);
    font-size:1rem;
}
.banner div h2{
    color:var(--color2);
    font-size:0.3rem;
    font-weight: normal;
}
.banner div button{
    color:var(--color2);
    font-size:0.18rem;
    font-weight: normal;
    border-radius: 6px;
    border: 0;
    background-color: #337ab7;
    box-shadow: inset 0 -4px 0 #23527c;
    padding: 0.1rem 0.3rem 0.15rem;
}
.banner p{
    color:var(--color1);
    font-size:0.14rem;
}
.banner div :nth-last-child(n+2){
    margin:0.2rem 0 0.1rem 0;
}
/* 标题 */
.section_title{
    display: grid;
    height: 1.1rem;
    grid-template-rows: repeat(2,1fr);
    grid-template-columns: 0.5fr repeat(2,1.5fr) 0.5fr;
    place-items: center;
}
.section_title h1{
    grid-row: 1;
    grid-column: 2 / span 2;
    font-size: 0.42rem;
    font-weight: normal;
}
.section_title h2{
    grid-row: 2;
    grid-column: 2 / span 2;
    font-size: 0.14rem;
    font-weight: normal;
    margin: 0.2rem 0 0.1rem;
    color:var(--color1);
    text-align:center;
}
.section_title hr{
    grid-row: 3;
    grid-column: 2 / span 2;
    width: 100%;
    border: 1px solid #eee;
}
.box{
    margin:0.5rem 0;
}
/* 内容 */
.boxcontent{
    margin-top:0.2rem;
}
.boxcontent ul{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(2,1fr);
    grid-auto-flow: row;
    gap: 0.3rem;
}
.boxcontent ul li{
    border: 1px solid #ddd;
}
.boxcontent ul li div:nth-of-type(1){
    height: 1.5rem;
    overflow: hidden;
}
.boxcontent ul li div:nth-of-type(1) img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.boxcontent ul li div:nth-of-type(2){
    text-align:center;
    display: grid;
    grid-template-rows: repeat(2,1fr);
    place-items:center;
    padding: 0.15rem;
}
.boxcontent ul li div:nth-of-type(2) h1{
    color:#337ab7;
    font-size:0.24rem;
}
.boxcontent ul li div:nth-of-type(2) p{
    color:var(--color1);
    font-size:0.14rem;
}
/* 底部 */
footer{
    border-top:1px solid #ddd;
}
.foot{
    display: grid;
    grid-template-rows:2rem 0.5rem;
}
.foot .foot_box{
    border-bottom: 1px solid #ddd;
    padding: 0.3rem 0;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.foot .foot_box .foot_logo img{
    height: 0.5rem;
    margin: 0.1rem 0;
}
.foot .foot_box .foot_logo p{
    color:var(--color1);
    font-size: 0.14rem;
}
.foot .foot_box .foot_nav{
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
.foot .foot_box .foot_nav dl dt{
    margin: 0.1rem 0;
}
.foot .foot_box .foot_nav dl dd{
    color:var(--color1);
    font-size:0.14rem;
}
.foot .foot_copy{
    place-self: center;
    font-size: 0.14rem;
    color:var(--color1);
}
@media only screen and (max-width: 1200px) {
    section,footer{
        padding-left:0.15rem;
        padding-right:0.15rem;
    }
}
@media only screen and (max-width: 992px) {
    html{
        font-size:calc(100vw / 10);
    }
    nav{
        place-content: center;
    }
    nav ul:nth-of-type(2){
        display:none;
    }
}
@media only screen and (max-width: 768px) {
    html{
        font-size:calc(100vw / 8);
    }
    nav{
        display: block;
        line-height: 0.5rem;
    }
    nav ul:nth-of-type(1){
        display:none;
    }
    .navbar{
        display: flex;
        place-content: space-between;
        color:#9d9d9d;
        font-size:0.16rem;
        padding: 0 0.2rem;
    }
    .section_title{
        height:2rem;
    }
    .boxcontent ul li div:nth-of-type(2) h1{
        font-size:0.3rem;
    }
    .boxcontent ul {
        grid-template-columns: repeat(2,1fr);
        gap: 0.15rem;
    }
    .foot {
        grid-template-rows: 4rem 0.5rem;
    }
    .foot .foot_box .foot_logo{
        text-align: center;
    }
    .foot .foot_box{
        grid-template-columns: repeat(1,1fr);
    }
    .foot .foot_box .foot_nav {
        place-items: center;
        text-align: center;
    }
}
</style>
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <div class="navbar">
                    <div><a href="">Bootstrap中文网</a></div>
                    <div><i>icon</i></div>
                </div>
                <ul>
                    <li><a href="">Bootstrap中文网</a></li>
                    <li><a href="">Bootstrap3中文文档</a></li>
                    <li><a href="">Bootstrap4中文文档</a></li>
                    <li><a href="">Sass 教程</a></li>
                    <li><a href="">Less 教程</a></li>
                    <li><a href="">jQuery API</a></li>
                    <li><a href="">网站实例</a></li>
                </ul>
                <ul>
                    <li><a href="">关于</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <section class="banner">
            <div class="container" >
                <h1>Bootstrap</h1>
                <h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
                <button>Bootstrap3中文文档(v3.4.1)</button>
                <p>Bootstrap2中文文档(v2.3.2)</p>
            </div>
        </section>
        <section class="box" >
            <div class="container" >
                <div class="section_title" >
                    <h1>Bootstrap相关优质项目推荐</h1>
                    <h2>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</h2>
                    <hr/>
                </div>
                <div class="boxcontent" >
                    <ul>
                        <li>
                            <a>
                                <div>
                                    <img src="https://picsum.photos/300/150" alt="">
                                </div>
                                <div>
                                    <h1>优站精选</h1></h1>
                                    <p> Bootstrap 网站实例</p>
                                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a>
                                <div>
                                    <img src="https://picsum.photos/300/150" alt="">
                                </div>
                                <div>
                                    <h1>优站精选</h1></h1>
                                    <p> Bootstrap 网站实例</p>
                                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a>
                                <div>
                                    <img src="https://picsum.photos/300/150" alt="">
                                </div>
                                <div>
                                    <h1>优站精选</h1></h1>
                                    <p> Bootstrap 网站实例</p>
                                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a>
                                <div>
                                    <img src="https://picsum.photos/300/150" alt="">
                                </div>
                                <div>
                                    <h1>优站精选</h1></h1>
                                    <p> Bootstrap 网站实例</p>
                                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a>
                                <div>
                                    <img src="https://picsum.photos/300/150" alt="">
                                </div>
                                <div>
                                    <h1>优站精选</h1></h1>
                                    <p> Bootstrap 网站实例</p>
                                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a>
                                <div>
                                    <img src="https://picsum.photos/300/150" alt="">
                                </div>
                                <div>
                                    <h1>优站精选</h1></h1>
                                    <p> Bootstrap 网站实例</p>
                                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a>
                                <div>
                                    <img src="https://picsum.photos/300/150" alt="">
                                </div>
                                <div>
                                    <h1>优站精选</h1></h1>
                                    <p> Bootstrap 网站实例</p>
                                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a>
                                <div>
                                    <img src="https://picsum.photos/300/150" alt="">
                                </div>
                                <div>
                                    <h1>优站精选</h1></h1>
                                    <p> Bootstrap 网站实例</p>
                                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a>
                                <div>
                                    <img src="https://picsum.photos/300/150" alt="">
                                </div>
                                <div>
                                    <h1>优站精选</h1></h1>
                                    <p> Bootstrap 网站实例</p>
                                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a>
                                <div>
                                    <img src="https://picsum.photos/300/150" alt="">
                                </div>
                                <div>
                                    <h1>优站精选</h1></h1>
                                    <p> Bootstrap 网站实例</p>
                                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a>
                                <div>
                                    <img src="https://picsum.photos/300/150" alt="">
                                </div>
                                <div>
                                    <h1>优站精选</h1></h1>
                                    <p> Bootstrap 网站实例</p>
                                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a>
                                <div>
                                    <img src="https://picsum.photos/300/150" alt="">
                                </div>
                                <div>
                                    <h1>优站精选</h1></h1>
                                    <p> Bootstrap 网站实例</p>
                                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <div class="container">
            <div class="foot">
                <div class="foot_box" >
                    <div class="foot_logo" >
                        <img src="https://picsum.photos/250/50" alt="">
                        <p>我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</p>
                    </div>
                    <div class="foot_nav">
                        <dl>
                            <dt>关于</dt>
                            <dd>关于我们</dd>
                            <dd>广告合作</dd>
                            <dd>友情链接</dd>
                            <dd>招聘信息</dd>
                        </dl>
                        <dl>
                            <dt>关于</dt>
                            <dd>关于我们</dd>
                            <dd>广告合作</dd>
                            <dd>友情链接</dd>
                            <dd>招聘信息</dd>
                        </dl>
                        <dl>
                            <dt>关于</dt>
                            <dd>关于我们</dd>
                            <dd>广告合作</dd>
                            <dd>友情链接</dd>
                            <dd>招聘信息</dd>
                        </dl>
                        <dl>
                            <dt>关于</dt>
                            <dd>关于我们</dd>
                            <dd>广告合作</dd>
                            <dd>友情链接</dd>
                            <dd>招聘信息</dd>
                        </dl>
                    </div>
                </div>
                <div class="foot_copy">
                    <p>版权xxx所有备案号xxx</p>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

移动布局

grid容器(网格布局)

父级设置

设置grid元素

设置列数

设置行数

设置间距

对齐(整个容器居中)

单元格对齐

隐式网格:超出网格的项目

设置隐式网格排列方式[row横排列|column纵排列]

设置隐式网格纵排列大小

设置隐式网格横排列大小

子级设置

网格区域(span 跨越几行)

单独设置对齐模式

案例

相关文章