响应式布局

最新推荐文章于 2024-06-06 17:22:08 发布

JJ_Smilewang

最新推荐文章于 2024-06-06 17:22:08 发布

阅读量1.3k

点赞数

分类专栏：页面布局文章标签： html5 前端

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124248056

版权

页面布局专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 响应式布局原理

所谓响应式布局，就是随着屏幕宽度的不同，呈现出不同的布局样式，它是通过使用媒体查询，针对不同宽度的设备进行布局和样式实现的。

2. 响应式布局容器

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

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

平时我们的响应式尺寸划分

①小屏幕（手机，小于 768px）：设置容器宽度为 100%
②小屏幕（平板，大于等于 768px）：设置容器宽度为 750px
③中等屏幕（桌面显示器，大于等于 992px）：设置容器宽度为 970px
④大屏幕（大桌面显示器，大于等于 1200px）：设置容器宽度为 1170px

当然我们也可以根据实际情况自己定义划分。

3. 应用：响应式导航

① 当我们屏幕大于800像素，我们给容器宽度为800px，因为里面子盒子需要浮动，所以容器需要清除浮动。
②容器里面包含8个小li 盒子，每个盒子的宽度定为 100px，高度为 30px，浮动一行显示。
③ 当我们屏幕缩放，宽度小于等于800像素的时候，容器盒子宽度修改为 100% 宽度。
④ 容器里面的8个小li，宽度修改为 33.33%，这样一行就只能显示3个小li ，剩余换行显示。代码和效果如下：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .container {
        width: 800px;
        margin: 30px auto;
    }
    .container ul li {
        list-style: none;
        float: left;   /* 利用浮动让8个li排在一行 */
        width: 100px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        background-color: green;
    }
    @media screen and (max-width:800px) {    /* 屏幕宽度小于等于800px时，三个li排一行 */
        .container {
            width: 100%;
        }
        .container ul li {
            width: 33.33%;   /* 宽度设为33.33%，就可实现三个li排一行 */
        }
    }
</style>
<body>
    <div class="container">
        <ul>
            <li>导航栏1</li>
            <li>导航栏2</li>
            <li>导航栏3</li>
            <li>导航栏4</li>
            <li>导航栏5</li>
            <li>导航栏6</li>
            <li>导航栏7</li>
            <li>导航栏8</li>
        </ul>
    </div>
</body>

响应式布局需要借助媒体查询进行实现，所以一定要先掌握好媒体查询，然后再根据设计需求进行对应结构和样式开发即可。另外，我们在实际开发中，会先选取一种主要技术选型，其他技术做为辅助，这种混合技术开发才是最常用的。

JJ_Smilewang

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
响应式布局

1. 响应式布局原理所谓响应式布局，就是随着屏幕宽度的不同，呈现出不同的布局样式，它是通过使用媒体查询，针对不同宽度的设备进行布局和样式实现的。2. 响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。平时我们的响应式尺寸划分①小屏幕（手机，小于 768px）：设置容器宽度为 100%②小屏幕（平板，大于等于 .
复制链接

扫一扫