1.响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
| 设备划分 | 尺寸空间 |
|---|---|
| 超小屏幕（手机） | <768px |
| 小屏设备 （平板） | >=768px ~ <992px |
| 中等屏幕（桌面显示器） | >=992px ~ <1200px |
| 宽屏设备（大桌面显示器） | >=1200px |
2.响应式布局容器
响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
原理就是再不同的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化
平时我们的响应式尺寸划分（自己也可以视情况而定）
- 超小屏幕（手机） <768px：设置宽度为100%
- 小屏设备 （平板） >=768px ：设置宽度为750px
- 中等屏幕（桌面显示器） >=992px :设置宽度为970px
- 宽屏设备（大桌面显示器） >=1200px:设置宽度为1170px
<style type="text/css">
.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.中等屏幕下 大于等于992 布局容器的宽度为970px */
@media screen and (min-width:992px) {
.container {
width: 970px;
}
}
/* 4.大屏幕下 大于等于1200 布局容器的宽度为1170px */
@media screen and (min-width:1200px) {
.container {
width: 1170px;
}
}
</style>
<body>
<!-- 响应式布局开发里面，首先需要一个布局容器 -->
<div class="container">
</div>
</body>
253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
