样式自适应

最新推荐文章于 2025-03-21 21:21:34 发布

小赵很活泼

最新推荐文章于 2025-03-21 21:21:34 发布

阅读量438

点赞数 8

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/id9426/article/details/143918440

版权

1，实现方式一媒体查询

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

<!-- 
    设置视口（viewport），确保网页在移动设备上能够正确显示。
    width=device-width：设置视口的宽度等于设备的宽度。这使得页面宽度与设备屏幕宽度一致，避免了页面在移动设备上显示过宽或过窄的问题。
    initial-scale=1：设置页面初始的缩放比例为 1。这意味着页面加载时不会自动缩放。
    maximum-scale=1：设置用户允许的最大缩放比例为 1。这意味着用户不能放大页面。
    user-scalable=no：禁止用户手动缩放页面。这可以防止用户通过双指缩放手势改变页面的缩放比例。

    应用场景
    移动设备优化：确保网页在移动设备上显示良好，不会出现水平滚动条或内容被压缩的情况。
    响应式设计：配合媒体查询（media queries）和响应式布局（responsive design）技术，确保网页在不同设备上都能提供良好的用户体验。
    固定布局：在需要固定布局的场景中，禁止用户缩放可以确保页面布局不会因为用户操作而变形。
-->

<!-- 常用屏幕范围 -->
<style>
        /*0~320*/
        @media (max-width: 320px) {
            html{font-size: 20px;}
        }

        /*321~768*/
        @media (min-width: 321px) and (max-width: 375px) {
            html{font-size: 40px;}
        }

        /*376~425*/
        @media (min-width: 376px) and (max-width: 425px) {
            html{font-size: 60px;}
        }

        /*426~768*/
        @media (min-width: 426px) and (max-width: 768px) {
            html{font-size: 80px;}
        }

        /*769~+∞*/
        @media (min-width: 769px) {
            html{font-size: 100px;}
        }
</style>

2，实现方式二 @import 语法

/* index01.css */
body {
    background-color: lightblue;
    font-size: 18px;
}

/* index02.css */
body {
    background-color: lightgreen;
    font-size: 14px;
}

/* main.css */

/* 导入适用于屏幕宽度在 720px 到 1024px 之间的样式 */
@import 'index01.css' screen and (max-width: 1024px) and (min-width: 720px);

/* 导入适用于屏幕宽度小于 720px 的样式 */
@import 'index02.css' screen and (max-width: 720px);

/* 其他通用样式 */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式设计示例</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <h1>欢迎来到响应式设计示例</h1>
    <p>这是一个简单的响应式设计示例，根据屏幕宽度加载不同的样式。</p>
</body>
</html>

3，实现方式三 <link> 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式设计示例</title>

    <!-- 导入适用于屏幕宽度在 720px 到 1024px 之间的样式 -->
    <link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width: 1024px) and (min-width: 720px)">

    <!-- 导入适用于屏幕宽度小于 720px 的样式 -->
    <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width: 720px)">
</head>
<body>
    <h1>欢迎来到响应式设计示例</h1>
    <p>这是一个简单的响应式设计示例，根据屏幕宽度加载不同的样式。</p>
</body>
</html>

4，实现方式四 rem，当初始屏幕为750px时。

使用 vw 单位设置根元素的 font-size 可以实现基于屏幕宽度的自适应布局。随着屏幕宽度的变化，根元素的 font-size 会相应调整，从而影响整个页面的布局和字体大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应布局示例</title>
    <style>
        /* 设置根元素的 font-size 为 13.33vw */
        html {
            font-size: 13.33vw;
        }

        /* 示例样式 */
        body {
            font-size: 1rem; /* 1rem 等于根元素的 font-size */
            background-color: lightblue;
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        h1 {
            font-size: 1.5rem; /* 1.5 倍的根元素 font-size */
        }

        p {
            font-size: 1rem; /* 1 倍的根元素 font-size */
        }
    </style>
</head>
<body>
    <h1>欢迎来到自适应布局示例</h1>
    <p>这是一个简单的自适应布局示例，根据屏幕宽度调整字体大小。</p>
</body>
</html>

说明

根元素的 font-size：
- html { font-size: 13.33vw; } 设置根元素的 font-size 为视口宽度的 13.33%。
- 在 750px 的屏幕上，1rem 等于 100px。
其他元素的 font-size：
- body { font-size: 1rem; } 表示 body 的字体大小等于根元素的 font-size。
- h1 { font-size: 1.5rem; } 表示 h1 的字体大小是根元素 font-size 的 1.5 倍。
- p { font-size: 1rem; } 表示 p 的字体大小等于根元素的 font-size。

优点

自适应：随着屏幕宽度的变化，根元素的 font-size 会自动调整，从而影响所有使用 rem 单位的元素的大小。
灵活性：可以通过调整根元素的 font-size 来全局控制页面的字体大小，而不需要逐个调整每个元素的 font-size。

注意事项

最小和最大限制：为了防止字体大小在极端情况下变得过大或过小，可以使用 clamp 函数来设置 font-size 的最小和最大值。
```
html {
    font-size: clamp(16px, 13.33vw, 100px);
}
```
16px 是最小值。 13.33vw 是基于视口宽度的动态值。 100px 是最大值。