1、基本用法
首先在页面头部添加以下标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
@media (min-width: 768px)
代表屏幕宽度 >= 768px时将应用其所对应的css样式
@media (max-width: 767px)
代表屏幕宽度 <= 767px时将应用其所对应的css样式
2、注意事项
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 1000px){ //>=1000的设备 }
@media (min-width: 1600){ //>=1600的设备 }请注意排列顺序，min-width从小到大依次排列
@media (max-width: 1599){ //<=1599的设备 }
@media (max-width: 999px){ //<=999的设备 }
@media (max-width: 767px){ //<=767的设备 }请注意排列顺序，max-width从大到小依次排列
已有 3706 位网友参与，快来吐槽：
发表评论