------------------------- 响应式开发 ------------------------
1.1 响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。
1. 设备划分:
- 超小屏幕 (手机) < 768 px
- 小屏设备 (平板) >= 768 px ~~ < 992 px
- 中等屏幕 (桌面显示器) >= 992px ~~ <1200px
- 宽屏设备 (大桌面显示器)>= 1200px
1.2 响应式布局容器
响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果
原理:就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。
1. 平时我们的响应式尺寸划分 ( 宽度少了是因为会有一点留白 )
- 超小屏幕(手机,小于 768px):设置宽度为 100%
- 小屏幕(平板,大于等于 768px):设置宽度为 750px
- 中等屏幕(桌面显示器,大于等于 992px):宽度设置为 970px
- 大屏幕(大桌面显示器,大于等于 1200px):宽度设置为 1170px
.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;
}