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>