响应式布局原理,media query媒体查询简单写法

1. 第一种写法
<style>
body{
margin: 0;
padding: 0;
}
.container{
/*在固定布局中*/
width: 1200px;
height: 1200px;
background-color: pink;
margin: 0 auto;
}

/*利用media query 查询屏幕*/
/*1.在大屏设备中,布局容器  背景变成蓝色  宽度变成1170px 内容居中*/
/*and  与后面的条件之间要有空格*/
@media screen and (min-width: 1200px) {
.container{
background: blue;
width: 1170px;
}
}
/*2.在中屏设备中,布局容器变为红色  宽度变为970px  内容居中*/
@media screen and (min-width: 992px) and (max-width: 1200px){
.container{
background: red;
width: 970px;
}
}
/*3.在小屏设备中 布局容器 变成绿色 宽度变为 750px 内容居中*/
@media screen and (min-width: 768px) and (max-width:992px){
.container{
background: green;
width: 750px;
}
}
/*4.在超小屏幕设备中 布局容器 背景变为黄色 宽度变为100% 内容自适应*/
@media screen and (max-width:768px){
.container{
background:yellow ;
width: 100%;
}
}
2. 第二种写法
<style>
body{
margin: 0;
padding: 0;
}
.container{
/*在固定布局中*/
width: 1200px;
height: 1200px;
background-color: pink;
margin: 0 auto;
}
/*利用media query 查询屏幕*/
/*4.在超小屏幕设备中 布局容器 背景变为黄色 宽度变为100% 内容自适应*/
.container{
background:yellow ;
width: 100%;
}

/*3.在小屏设备中 布局容器 变成绿色 宽度变为 750px 内容居中*/
@media (min-width: 768px){
.container{
background: green;
width: 750px;
}
}
/*2.在中屏设备中,布局容器变为红色  宽度变为970px  内容居中*/
@media (min-width: 992px){
.container{
background: red;
width: 970px;
}
}
/*1.在大屏设备中,布局容器  背景变成蓝色  宽度变成1170px 内容居中*/
@media(min-width: 1200px) {
.container{
background: blue;
width: 1170px;
}
}