媒体查询
@media (媒体查询) {
/* 样式 */
}
/* eg: */
/* 视口宽度小于等于768px*/
@media (max-width: 768px) {
/* 样式 */
}
/* 视口宽度大于等于1200px*/
@media (min-width: 1200px) {
/* 样式 */
}
完整写法
@media 关键词 媒体类型 and (媒体特性) {
css代码
}
max-width、max-height | ||
min-width、min-height | ||
@media (min-width: 1200px) {
/* PC样式 */
}
@media (min-width: 992px) {
/* 样式 */
}
@media (min-width: 768px) {
/* >=768px 样式 */
}