Bootstrap

最新推荐文章于 2024-08-31 06:39:46 发布

原创最新推荐文章于 2024-08-31 06:39:46 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了响应式布局的关键——布局容器，通过媒体查询在不同屏幕尺寸下改变其大小，以适应不同设备的显示需求。示例代码展示了如何设置不同断点下的容器宽度，以实现从窄屏到宽屏的平滑过渡。响应式开发原理主要依赖于CSS的媒体查询，通过调整元素的样式和布局，使页面在不同分辨率下保持良好的用户体验。

一、响应式布局容器

二、响应式开发原理

一、响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面的子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        /* 超小屏幕下 小于768 布局容器的宽度为 100%*/
         @media screen and (max-width:767px){
             .container{
                 width: 100%;
             }
         }
         /* 小屏幕下 大于等于768  布局容器的宽度为 750px*/
         @media screen and (min-width:768px){
             .container{
                 width: 750px;
             }
         }
         /* 中等屏幕下 大于等于992  布局容器的宽度为 970px*/
         @media screen and (min-width:992px){
             .container{
                 width: 970px;
             }
         }
         /* 大屏幕下 大于等于1200 布局容器的宽度为 1170px */
         @media screen and (min-width:992px){
             .container{
                 width: 1170px;
             }
         }
    </style>
</head>
<body>
    <div class="container">

    </div>
</body>
</html>

二、响应式开发原理

默认效果是在一行显示，width固定居中，所以默认将父盒子设置 width：750px，利用margin居中当小于768的时候，父盒子占据一整行，并且子盒子占据三分之一所以利用媒体查询判断，如果满足条件，将父盒子width：100%； n 将子盒子的width：33.3333%

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        /* 超小屏幕下 小于768 布局容器的宽度为 100%*/
         @media screen and (max-width:767px){
             .container{
                 width: 100%;
             }
         }
         /* 小屏幕下 大于等于768  布局容器的宽度为 750px*/
         @media screen and (min-width:768px){
             .container{
                 width: 750px;
             }
         }
         /* 中等屏幕下 大于等于992  布局容器的宽度为 970px*/
         @media screen and (min-width:992px){
             .container{
                 width: 970px;
             }
         }
         /* 大屏幕下 大于等于1200 布局容器的宽度为 1170px */
         @media screen and (min-width:992px){
             .container{
                 width: 1170px;
             }
         }
    </style>
</head>
<body>
    <div class="container">

    </div>
</body>
</html>