使用 @media 查询来制作响应式设计

@media screen and (min-width:1507px) and (max-width:1619px){
.className:
}
@media screen and (min-width:1101px) and (max-width:1280px){
.className:
}
@media screen and (min-width:1024px) {
}
@media screen and (min-width:1620px) and (max-width:1848px){
}
当我们在写样式的时候用到的padding margin ，在不同的浏览器分辨率下，效果会有偏差，用媒体查询可以比较好的解决这个问题。
事例如下：
.example {
padding: 20px;
color: white;
}

@media only screen and (max-width: 600px) {
.example {background: red;}
}

@media only screen and (min-width: 600px) {
.example {background: green;}
}

@media only screen and (min-width: 768px) {
.example {background: blue;}
}

@media only screen and (min-width: 992px) {
.example {background: orange;}
}

@media only screen and (min-width: 1200px) {
.example {background: pink;}
}