移动端 之 响应式 布局
响应式开发
- 原理 就是使用媒体查询 针对不同宽度的设备进行布局和样式设置 从而适配不同设备的目的
响应式 布局容器
代码展示
<style>
.container{
height: 188px;
background-color: skyblue;
margin: 100px auto;
}
/* 超小屏幕下 小于768px 最大不大于768 所以给个767 布局容器的宽度设置100% */
@media screen and (max-width:767px) {
.container{
width: 100%;
}
}
/* 小屏幕下 大于 等于 768px 最小不小于768 布局容器的宽度设置750px */
@media screen and (min-width:768px) {
.container{
width: 750px;
}
}
/* 中等屏幕下 大于 等于 992px 最小不小于992px 布局容器的宽度设置970px */
@media screen and (min-width:992px) {
.container{
width: 970px;
}
}
/* 大屏幕下 大于 等于 1200px 最小不小于1200px 布局容器的宽度设置1170px */
@media screen and (min-width:1200px) {
.container{
width: 1170px;
}
}
</style>
</head>
<body>
<!-- 响应式开发里面 首先需要一个布局容器 -->
<div class="container"></div>
</body>