.a{
border: solid #000000 1px;
200px;
height: 200px;
background-color: tomato;
}
@media screen and (min-600px){
.a{
display: none;/*最小宽度600px,600px以上显示大括号内的操作*/
}
}
.b{
border: solid #000000 1px;
300px;
height: 300px;
background-color: aqua;
}
@media screen and (max-768px){
.b{
background-color: beige;
}
}
@media screen and (max-992px){
.b{
background-color: blue;
}
}
@media screen and (max-1200px){
.b{
background-color: brown;
}
}
@media screen and (min-1200px){
.b{
background-color: crimson;
}
}/*这样就能规定四个宽度区间内元素如何变化,可以用在pc、平板、手机多个终端*/
html文件内必须存在此条<meta name="viewport" content="width=device-width, initial-scale=1.0">
html{
font-size: 13.33333333vw;/*设计图像素640px时,这里用100/640*100(vw)*/
}
div{
7.5rem;/*设计图像素/100rem*/
}