移动端适配策略

axie
153 阅读6分钟

概览：

响应式设计

使用流式布局和媒体查询，使页面能够根据屏幕尺寸自动调整，内容会重新排列和缩放以适应不同大小的屏幕。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>响应式布局示例</title>
</head>
<body>
    <header>
        <h1>我的网站标题</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>欢迎来到我的网站</h2>
            <p>这是一个响应式布局的示例。</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 我的网站</p>
    </footer>
</body>
</html>

styles.css

/* 基础样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header, nav, main, footer {
    padding: 20px;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin-right: 10px;
}

/* 响应式布局 */
@media screen and (max-width: 600px) {
    /* 在小屏幕上，导航菜单变为垂直堆叠 */
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }
    
    /* 为了适应小屏幕，标题和段落文字变小 */
    h1, h2, p {
        font-size: 1rem;
    }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
    /* 在中等屏幕尺寸上，标题和段落文字适中 */
    h1, h2, p {
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 1025px) {
    /* 在大屏幕上，标题和段落文字较大 */
    h1, h2, p {
        font-size: 1.5rem;
    }
}

自适应设计

为不同类型的设备提供特定的布局和样式，可能会使用不同的HTML代码或CSS样式表来适应预定义的设备类型或屏幕尺寸。

特点是，更注重于设备检测，提供定制化的体验。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles-desktop.css" media="screen and (min-width: 1024px)">
    <link rel="stylesheet" href="styles-tablet.css" media="screen and (min-width: 768px) and (max-width: 1023px)">
    <link rel="stylesheet" href="styles-mobile.css" media="screen and (max-width: 767px)">
    <title>自适应设计示例</title>
</head>
<body>
    <header>
        <h1>我的网站标题</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>欢迎来到我的网站</h2>
            <p>这是一个自适应设计的示例。</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 我的网站</p>
    </footer>
</body>
</html>

电脑：styles-desktop.css

/* 桌面版样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header, nav, main, footer {
    padding: 20px;
    text-align: left;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin-right: 10px;
}

平板电脑：styles-tablet.css

/* 平板版样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header, nav, main, footer {
    padding: 15px;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: block;
    margin-bottom: 10px;
}

移动设备：styles-mobile.css

/* 移动版样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header, nav, main, footer {
    padding: 10px;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: block;
    margin-bottom: 10px;
}

使用REM和EM单位

在CSS中，rem 和 em 是两种相对单位，它们可以用来创建响应式和可缩放的布局。rem（root em）是相对于根元素（通常是<html>）的字体大小，而em是相对于其父元素的字体大小，这样可以创建更灵活的字体和布局尺寸。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html {
            font-size: 16px; /* 基准字体大小 */
        }
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>REM & EM 单位示例</title>
</head>
<body>
    <header>
        <h1 class="title">标题</h1>
    </header>
    <main>
        <section class="content">
            <p>这是一个使用 REM 和 EM 单位的例子。</p>
            <div class="box">
                <p>这是一个盒子，内部文本使用 EM 单位。</p>
            </div>
        </section>
    </main>
</body>
</html>

styles.css

/* 使用 REM 单位 */
.title {
    font-size: 2rem; /* 相当于 32px (2 * 16px) */
    color: #333;
}

.content {
    font-size: 1rem; /* 相当于 16px (1 * 16px) */
    line-height: 1.5;
}

/* 使用 EM 单位 */
.box {
    font-size: 1.5em; /* 相当于 24px (1.5 * 16px)，基于其父元素的字体大小 */
    background-color: #f0f0f0;
    padding: 1em; /* 基于盒子自身的字体大小 */
}

/* 媒体查询示例，改变根元素的字体大小 */
@media (max-width: 600px) {
    html {
        font-size: 14px; /* 在小屏幕上，基准字体大小减小 */
    }
}

Viewport Meta标签

特点：设置视口的宽度和缩放级别，以确保页面正确显示在移动设备上

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 视口元标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
    <h1>欢迎来到我的网站</h1>
    <p>这是一个使用Viewport Meta标签的例子。</p>
</body>
</html>

如果想要禁用掉移动端网页缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

流体网格

流体网格（Fluid Grids）是指在网页布局中使用百分比或可伸缩单位（如vw、vh）来代替固定的像素单位，从而使布局能够根据视口大小自动调整。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>流体网格布局示例</title>
</head>
<body>
    <div class="container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>

styles.css

/* 设置容器为Flexbox布局 */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

/* 定义网格项的样式 */
.grid-item {
    background-color: #f1c40f;
    padding: 20px;
    flex-basis: calc(33.33% - 20px); /* 占据大约33.33%的宽度，减去gap和padding的影响 */
    box-sizing: border-box;
}

/* 在较小的屏幕上，网格项占据50%的宽度 */
@media (max-width: 768px) {
    .grid-item {
        flex-basis: calc(50% - 20px);
    }
}

/* 在更小的屏幕上，网格项占据100%的宽度 */
@media (max-width: 480px) {
    .grid-item {
        flex-basis: calc(100% - 20px);
    }
}

弹性盒模型

弹性盒模型（Flexbox）是一种在CSS中用于创建灵活且响应式布局的强大工具。Flexbox允许你创建一维的布局，无论是水平还是垂直方向，都可以轻松地对齐和分布元素。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Flexbox 示例</title>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
        <div class="flex-item">Item 4</div>
        <div class="flex-item">Item 5</div>
    </div>
</body>
</html>

styles.css

/* 定义Flex容器的样式 */
.flex-container {
    display: flex; /* 启用Flex布局 */
    flex-wrap: wrap; /* 允许项目换行 */
    justify-content: space-around; /* 水平方向上平均分配剩余空间 */
    align-items: center; /* 垂直居中对齐项目 */
    background-color: #f1c40f;
    padding: 20px;
}

/* 定义Flex项目的样式 */
.flex-item {
    background-color: #3498db;
    padding: 20px;
    margin: 10px;
    flex: 1; /* 允许项目在可用空间中伸展 */
    text-align: center;
    line-height: 1.5em;
    box-sizing: border-box;
}

/* 在小屏幕上，项目将占据整个宽度 */
@media (max-width: 600px) {
    .flex-item {
        flex-basis: 100%;
    }
}

使用媒体查询

媒体查询（Media Queries）是CSS3引入的一种特性，用于根据不同设备的特性（如屏幕尺寸、分辨率、设备方向等）应用不同的样式规则。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>媒体查询示例</title>
</head>
<body>
    <header>
        <h1>我的网站标题</h1>
        <nav>
            <ul>
                <li><a href="#home">主页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>欢迎来到我的网站</h2>
            <p>这是一个使用媒体查询的响应式设计示例。</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2023 我的网站</p>
    </footer>
</body>
</html>

styles.css

/* 基本样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header, nav, main, footer {
    padding: 20px;
    text-align: center;
}

/* 默认导航栏样式 */
nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin-right: 10px;
}

/* 当屏幕宽度小于600px时 */
@media screen and (max-width: 600px) {
    /* 导航栏变为垂直布局 */
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }
    
    /* 加大字体大小，以适应小屏幕 */
    body {
        font-size: 18px;
    }
}

/* 当屏幕宽度介于601px和1024px之间时 */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    /* 中等屏幕的字体大小 */
    body {
        font-size: 20px;
    }
}

/* 当屏幕宽度大于1024px时 */
@media screen and (min-width: 1025px) {
    /* 大屏幕的字体大小 */
    body {
        font-size: 22px;
    }
}
avatar
文章
阅读
粉丝