响应式布局的五种方法

简介: 响应式布局是同一页面在不同的屏幕上有不同的布局,即只需要一套代码使页面适应不同的屏幕。

响应式布局是同一页面在不同的屏幕上有不同的布局,即只需要一套代码使页面适应不同的屏幕。

1.百分比布局

1.有父元素就相对于父元素

2.没有父元素就相对于视口的大小


举一个例子

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box2{
            width: 80%;
            height: 100px;
            background: red;
        }
        .box{
            width: 50%;
            height: 100px;
            background: yellow;
        }
        .box1{
            width: 50%;
            height: 50%;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

2.rem布局

rem(font size of the root element)是指相对于根元素的字体大小的单位,rem只是一个相对单位


rem和em的对比

  1. rem和em都是相对单位
  2. rem相对于根元素
  3. em相对于父元素


例如

<!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> %和rem 布局</title>
    <style>
        html {
            font-size: 30px;
        }
        .box {
            font-size: 10px;
        }
        .box2 {
            width: 10rem;
            height: 10rem;
            background-color: plum;
        }
        .box {
            width: 10em;
            height: 10em;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

3. 媒体查询 @media screen

例如

<!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>@media screen</title>
    <style>
        .box {
            width: 10rem;
            height: 10rem;
            background-color: pink;
            margin-left: 20rem;
        }
        /*  如果屏幕的宽大于1200px,它执行此css */
        @media screen and (min-width: 1200px) {
            html {
                font-size: 20px;
            }
        }
        /*  如果屏幕的宽小于1200px,它执行此css */
        @media screen and (max-width: 1200px) {
            html {
                font-size: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

4. flex布局

5.vw 和 vh

vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度,除了vw和vh外,还有vmin和vmax两个相关的单位。各个单位具体的含义如下:


例如

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100vw;
            height: 100vh;
            background: red;
        }
        .box1{
            width: 50vw;
            height: 50vh;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
        </div>
    </div>
</body>
</html>


相关文章
|
机器学习/深度学习 算法 数据可视化
【机器学习】十大算法之一 “PCA”
PCA(Principal Component Analysis,主成分分析)是一种广泛使用的线性降维算法,在机器学习领域被广泛应用。通俗地说,它是一种通过将高维数据映射到低维数据,保留数据主要特征的方法。在PCA中,数据被投影到一个新的低维抽象空间中,使新的特征集能最大化地解释数据集的方差,我们可以选择保留最大方差的前k个特征值。通常,PCA被用于降维,但它也被用作一种特征提取算法。在本文中,我们介绍了PCA算法的基本原理,讨论了它的应用,以及在Python中如何实现。
1604 0
【机器学习】十大算法之一 “PCA”
|
JavaScript 前端开发
js比较2个版本号大小
js比较2个版本号大小
702 1
|
JavaScript
Vue2使用v-model封装ElementUI_CheckBox组件
本文介绍了在Vue2中如何使用v-model封装ElementUI的CheckBox组件。封装后的组件支持有标题和无标题的情况,并提供了在Vue页面中的使用示例,包括单独使用和在表单中的使用。
422 2
|
8月前
|
人工智能
与 AI 智能体来一场“春节互动”
快来报名创建AI智能体,进行实时视频互动,讨论春节习俗如吃饺子、放鞭炮等。访问活动页面,按步骤部署并上传截图,即可获得限量蛇年抱枕,先到先得!活动时间:即日起至2025年2月14日16:00。
576 3
|
10月前
|
测试技术 Go C#
C#一分钟浅谈:ReSharper 插件增强开发效率
【10月更文挑战第25天】ReSharper 是 JetBrains 开发的一款 Visual Studio 插件,旨在提高 .NET 开发者的生产力。它通过代码分析、重构、导航等功能,帮助开发者避免常见错误,提升代码质量和开发效率。本文将通过具体代码案例,详细介绍 ReSharper 的常见功能及其应用。
770 1
|
前端开发 数据可视化 JavaScript
探索前端可视化开发:低代码平台原理与实践
【4月更文挑战第6天】本文探讨了低代码平台在前端开发中的应用,包括模型驱动和组件化开发原理,以及自动化代码生成和部署的优势。低代码平台能提高开发效率,降低技术门槛,并灵活适应变更,同时保证应用的一致性。实践中,需明确适用场景,选择合适平台,并培养团队低代码技能。通过与现有技术栈融合及持续优化,低代码平台能推动业务创新和数字化转型,开发者应积极探索其在实际项目中的应用。
360 0
|
传感器 JSON Dart
Dart笔记:stream_channel 包用法
Dart笔记:stream_channel 包用法
265 0
|
存储 机器学习/深度学习 弹性计算
ECS镜像问题之释放资源如何解决
ECS(Elastic Compute Service,弹性计算服务)是云计算服务提供商提供的一种基础云服务,允许用户在云端获取和配置虚拟服务器。以下是ECS服务使用中的一些常见问题及其解答的合集:
|
算法 IDE Linux
【CMake 小知识】CMake中的库目标命名和查找策略解析
【CMake 小知识】CMake中的库目标命名和查找策略解析
575 1
|
消息中间件
RabbitMQ
阿里云RabbitMQ的消息大小可以定制化。在版本3.7中,最大消息大小为2GiB,而在版本3.8开始,最大消息大小被限制为512MiB。如果用户配置一个更大的rabbit.max_message_size,那么这个值会被使用。 以上信息仅供参考,建议咨询阿里云官方工作人员获取更准确的信息。
239 3

热门文章

最新文章