移动WEB开发-响应式布局

最新推荐文章于 2024-05-03 00:02:41 发布

qq_52822043

最新推荐文章于 2024-05-03 00:02:41 发布

阅读量208

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_52822043/article/details/123513387

版权

1. 响应式开发

1）原理

原理：通过媒体查询针对不同宽度的设备进行布局和样式的设置，从而使配不同设备的目的。

2）响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。

原理：在不同屏幕下通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现在不同屏幕下看到不同的页面布局和样式变化。

   <style>
        .container {
            height: 100px;
            background-color: pink;
        }
        /* 1.超小屏幕 */
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
        }
        /* 2.小屏幕 */
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
            }
        }
        /* 3.中等屏幕 */
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
            }
        }
        /* 4.大屏幕 */
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
</head>
<body>
    <div class="container">

    </div>
</body>

2. Bootstrap前端开发框架

1) 布局容器

Bootstrap预先定义好了.container类。

1. container类

响应式布局的容器，固定宽度
大屏（>=1200px），宽度定为1170px
中屏（>=992px），宽度定为970px
小屏（>=768px），宽度定为750px
超小屏（100%）

2. container-fluid类

流式布局容器，百分百宽度
占据全部视口（viewport）
适合于单独做移动端开发

2) Bootstrap栅格系统

将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

随着屏幕或视口（viewport）尺寸的增加，系统会自动氛围最多12列。

1⃣️栅格选项参数

    <style>
        /* 给每个子元素加上边框 */
        div[class^="col-lg-"] {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="row">
        <!-- 份数相加刚好等于12，则子元素会占满整个container的宽度 -->
        <div class="col-lg-3">1</div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>
    </div>
    <div class="row">
        <!-- 份数相加小于12，则子元素占不满整个container，会有空白部分 -->
        <div class="col-lg-8">1</div>
        <div class="col-lg-1">2</div>
        <div class="col-lg-2">3</div>
    </div>
    <div class="row">
        <!-- 份数相加大于12，则子元素会另外起一行显示 -->
        <div class="col-lg-6">1</div>
        <div class="col-lg-6">2</div>
        <div class="col-lg-6">3</div>
    </div>
</body>
</html>

效果图：

2⃣️列嵌套

一个列内可以再分成若干份小列，添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。

   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        div[class^="col"] {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <!-- 添加一个新的row，可以取消父元素的padding值并且高度会自动和父元素的一样高 -->
                <div class="row">
                    <!-- 一个小列里面也是12等分 -->
                    <div class="col-lg-6">a</div>
                    <div class="col-lg-6">b</div>
                </div>
            </div>
            <div class="col-lg-4">2</div>
            <div class="col-lg-4">3</div>
        </div>
    </div>
</body>

效果图：

3⃣️ 列偏移

使用.col-md- offset-*类可以将列向右侧偏移，相当于是为当前元素添加了左侧的边距（margin）。

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^="col"] {
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 ">左侧</div>
            <!-- 添加左边的边距 -->
            <div class="col-lg-4 col-lg-offset-4">右侧</div>
        </div>
        <div class="row">
            <!-- 居中显示，则12-8=4，左右各平分4/2=2，偏移2 -->
            <div class="col-lg-8 col-lg-offset-2">中间</div>
        </div>
    </div>
</body>
</html>

效果图：

4⃣️列排序

通过.col-lg-push-*和.col-lg-pull-*类就可以改变列的顺序。

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        [class^="col"] {
            height: 50px;
            background-color: skyblue;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div8 class="row">
            <div class="col-lg-4">左侧</div>
            <div class="col-lg-8">右侧</div>
        </div8
        <div class="row">
            <!-- 向右推8份 -->
            <div class="col-lg-4 col-lg-push-8">左侧</div>
            <!-- 向左拉4份 -->
            <div class="col-lg-8 col-lg-pull-4">右侧</div>
        </div>
    </div>
</body>
</html>

效果图：

5⃣️响应式工具

显示某个页面的内容：visible-xs,visible-sm,visible-md,visible-lg

qq_52822043

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动WEB开发-响应式布局

1. 响应式开发1）原理原理：通过媒体查询针对不同宽度的设备进行布局和样式的设置，从而使配不同设备的目的。2）响应式布局容器响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。原理：在不同屏幕下通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现在不同屏幕下看到不同的页面布局和样式变化。2.3....
复制链接

扫一扫