响应式开发原理
响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
响应式开发可以实现，一套界面在不同终端进行正常显示。
移动端设备的屏幕分辨率太多，响应式将这些进行了归类：
| 设备划分 | 尺寸区间 |
|---|---|
| 超小屏幕（手机） | < 768px |
| 小屏设备（平板） | >= 768px ~ < 992px |
| 中等屏幕（桌面显示器） | >= 992px ~ <1200px |
| 宽屏设备（大桌面显示器） | >= 1200px |
响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
| 父容器版心的尺寸 | 宽度 |
|---|---|
| 超小屏幕（手机，小于 768px） | 宽度设置为 100% （屏幕小的，我们让界面跟屏幕一般大） |
| 小屏幕（平板，大于等于 768px） | 宽度设置为 750px |
| 中等屏幕（桌面显示器，大于等于 992px） | 宽度设置为 970px |
| 大屏幕（大桌面显示器，大于等于 1200px） | 宽度设置为 1170px |
- 规律：父容器的宽度总是比屏幕小一点，这是因为我们在处理的时候，让父容器居中，两边有些许空白，这样更好看，所以父容器，也可以叫做版心。
- 但是我们也可以根据实际情况自己定义划分
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</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></div>
<div></div>
<div></div>
</div>
</body>
</html>
总结：
rem布局，我们是根据媒体查询来控制html的font-size的大小，界面的元素尺寸都以font-size为单位，屏幕变化，font-size变化，进而影响界面的每个元素。
响应式布局，我们是根据媒体查询控制父布局容器的宽度，界面的元素尺寸都以父布局容器为参考，以父布局容器的百分比来设置元素大小。这样的话，屏幕变化，父布局容器宽度变化，进而影响界面的每个元素。
响应式案例-导航栏
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</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: green;
}
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
.container ul li {
width: 33.33%;/*布局中的元素，都以父容器的宽度百分比设置大小*/
}
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
</ul>
</div>
</body>
</html>
218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
