移动Web开发——响应式布局（一）

最新推荐文章于 2024-05-27 22:36:37 发布

红人日天

最新推荐文章于 2024-05-27 22:36:37 发布

阅读量1.7k

点赞数 6

分类专栏：响应式布局文章标签： css html web

本文链接：https://blog.csdn.net/zhr_beyond/article/details/114284871

版权

响应式布局专栏收录该内容

3 篇文章 0 订阅

订阅专栏

响应式布局（一）

学习目标

（1）能够说出响应式原理

（2）能够使用媒体查询完成响应式导航

（3）能够使用 bootstrap 的栅格系统

（4）能够使用 bootstrap 的响应式工具

（5）能够独立完成阿里百秀首页案例

1.响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备划分	尺寸区间
超小屏幕（手机）	< 768px
小屏设备（平板）	>= 768px ~ < 992px
中等屏幕（桌面显示器）	>= 992px ~ < 1200px
宽屏设备（大桌面显示器）	>= 1200px

2.响应式布局容器

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

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

响应式尺寸划分

屏幕	尺寸
超小屏幕	宽度100%
小屏幕	宽度设置为750px
中等屏幕	宽度设置为970px
大屏幕	宽度设置为1170px

我们也可以根据情况自己定义划分

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
		<style>
			.container {
			    height: 150px;
			    background-color: pink;
			    margin: 0 auto;
			}
			/* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
			
			@media screen and (max-width: 767px) {
			    .container {
			        width: 100%;
			    }
			}
			/* 2. 小屏幕下  大于等于768  布局容器改为 750px */
			
			@media screen and (min-width: 768px) {
			    .container {
			        width: 750px;
			    }
			}
			/* 3. 中等屏幕下 大于等于 992px   布局容器修改为 970px */
			
			@media screen and (min-width: 992px) {
			    .container {
			        width: 970px;
			    }
			}
			/* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
			
			@media screen and (min-width: 1200px) {
			    .container {
			        width: 1170px;
			    }
			}
		</style>
	</head>
	<body>
		<div class="container">
			
		</div>
	</body>
</html>

按照不同档位，盒子的宽度是不一样的
在这里插入图片描述

3.响应式导航案例

（1）需求分析

① 当屏幕>=768px时，给布局容器container宽度为750px

② container里面包含8个小li盒子，每个盒子宽度定位93.75px，高度为30px，浮动一行显示

③ 当屏幕缩放，宽度<=768px时，container盒子宽度修改为100%宽度

④ 此时8个小li，宽度修改为33.33%，这样一行只能显示3个小li，剩余厦航显示

（2）代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
		<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .container {
            width: 750px;
            margin: 0 auto;
        }
        
        .container ul li {
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: yellow;
        }
        
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
            .container ul li {
                width: 33.33%;
            }
        }
    </style>
</head>

<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>

</html>