移动端布局思路与视口之间关系并实例演示基本架构

移动端布局思路

视图统一
- 设置布局视图和视觉视图统width=device-width
- 理想视图与视觉视图统一inintial-scale=1.0
把之前使用的px转换成rem
- 为方便计算,将 1rem 设置为 100px,一般以屏幕宽度(375px)为基准,为方便计算,将 1rem 设置为 100px,100px=100vw/1vw=100vw/(375/100)=100vw/3.75
把根元素中的字体大小改成浏览器默认的 16px
- 因为已经改成 1rem=100px,所有这里的 16px 为 0.16rem
```
body {
font-size: 0.16rem;
}
```

限制一下手机上最大最小字号

通过媒体查询的方式设置,这里不能使用rem,不然不同手机宽度可能就超出或很小

/* 最小的字号,宽度小于等于320px采用的样式 */
@media screen and (max-width: 320px) {
:root {
    font-size: 85px;
}
}
/* 最大的字号,宽度大于等于640px采用的样式 */
@media screen and (min-width: 640px) {
:root {
    font-size: 170px;
}
}

三种视口之间的关系

布局视口Layout viewport
- 设备无关, 通常默认980px,显示完整网页
视觉视口visual viewport
- 设备相关,用户手机屏幕可见部分,通过缩放查看全部
理想视口idea viewport
- 不必缩放就可查看全部,针对移动端进行布局

手机页面的基本整体架构

<!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>手机页面布局整体架构</title>
        <link rel="stylesheet" href="css/reset.css" />
        <style>
            /* 顶部 */
            header {
                position: relative;
            }
            /* logo和搜索框布局 */
            header .top {
                position: fixed;
                display: flex;
                width: 100vw;
                justify-content: space-between;
                padding: 0.05rem 0.15rem;
                background-color: rgb(228, 114, 8);
            }
            /* 设置一下搜索框宽度 */
            header .top .search input {
                width: 70vw;
            }
            /* 把轮播图的位置设置出来 */
            header .carousel {
                position: absolute;
                top: 0.29rem;
                height: 1.17rem;
            }
            /* 轮播图设置宽度 */
            header .carousel img {
                width: 100vw;
            }
            /* 导航组 */
            header .nav {
                position: absolute;
                top: calc(0.29rem + 1.17rem);
                height: 1.5rem;
                display: grid;
                width: 100vw;
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows: repeat(2, 1fr);
                place-items: center;
            }
            /* 主体部分 */
            main {
                position: relative;
                top: calc(0.29rem + 1.17rem + 1.5rem);
                padding: 0.1rem;
            }
            /* 主体部分字体颜色等 */
            main div {
                color: red;
                font-size: 0.3rem;
                font-weight: bolder;
                text-align: center;
            }
            /* 底部菜单栏做个固定定位 */
            footer {
                position: fixed;
                top: calc(100vh - 0.46rem);
                background-color: #fff;
            }
            /* 底部布局 */
            footer .menu {
                display: flex;
                width: 100vw;
                height: 0.46rem;
                justify-content: space-around;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <!-- 页眉 -->
        <header>
            <div class="top">
                <!-- 顶部logo和搜索框等 -->
                <div class="logo">图标</div>
                <div class="search">
                    <input type="search" placeholder="我是搜索框" />
                </div>
            </div>
            <div class="carousel">
                <!-- 轮播图 -->
                <img src="image/1.jpg" alt="" />
            </div>
            <ul class="nav">
                <li>分类1</li>
                <li>分类2</li>
                <li>分类3</li>
                <li>分类4</li>
                <li>分类5</li>
                <li>分类6</li>
                <li>分类7</li>
                <li>分类8</li>
            </ul>
        </header>
        <!-- 主体 -->
        <main>
            <!-- 主体内容,根据不同需要进行具体操作 -->
            <div>
                <p>我是主体1</p>
                <p>我是主体2</p>
                <p>我是主体3</p>
                <p>我是主体4</p>
                <p>我是主体5</p>
                <p>我是主体6</p>
                <p>我是主体</p>
                <p>我是主体</p>
                <p>我是主体</p>
                <p>我是主体</p>
                <p>我是主体</p>
                <p>我是主体</p>
                <p>我是主体</p>
                <p>我是主体</p>
                <p>我是主体</p>
                <p>我是主体999</p>
            </div>
        </main>
        <!-- 页脚 -->
        <footer>
            <!-- 底部菜单栏,一般是首页,我的等按钮 -->
            <ul class="menu">
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
                <li>菜单4</li>
            </ul>
        </footer>
    </body>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

markdown简单语法与html标签简介

2022-03-17 17:07:40