响应式布局

小番水源

于 2022-07-12 10:31:14 发布

阅读量160

点赞数

分类专栏：移动端布局文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_43368552/article/details/125691240

版权

移动端布局专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了响应式布局的概念，通过媒体查询实现不同屏幕尺寸下的样式调整，确保网页在手机、电脑和平板等设备上的良好显示。示例代码展示了如何设置背景颜色以展示min-width和max-width的书写顺序。此外，还提到了Bootstrap框架及其栅格系统在响应式设计中的应用。

摘要由CSDN通过智能技术生成

响应式布局简单的来说，就是一套代码能够兼容不同的屏幕设备。

响应式布局就是通过媒体查询，检测设备宽度的变化，设置差异化样式。

媒体查询书写顺序：

min-width（从小到大的书写顺序）

mix-width（从大到小的书写顺序）

<!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>
        /* 视口宽度 >=768px, 网页背景是  粉色  
        视口宽度 >=992px, 网页背景是  绿色
        视口宽度 >=1200px, 网页背景是  skyblue    */

 
        /* css具有样式层迭性，min-width书写顺序是从小到大；
        min-width书写顺序是从大到小
        */

        @media(min-width:  1200px){
            body{
                background-color: skyblue;
            }
        }



        @media(min-width:  768px){
            body{
                background-color: pink;
            }
        }

        
        @media(min-width:  992px){
            body{
                background-color: green;
            }
        }

    
    </style>
</head>
<body>
    
</body>
</html>

媒体查询完成的写法：

@media 关键词媒体类型 and （媒体特征）{css代码}