1. 常用媒體設(shè)備類型
- screen 屏幕顯示設(shè)備
- print 打印機(jī)設(shè)備
<style media="screen, print"></style>
2. 使用link標(biāo)簽設(shè)置媒體類型
<link rel="stylesheet" href="css/screen.css" media="screen">
3. 使用@import簡化引入多文件
<link rel="stylesheet" href="css/common.css" >
@import url(screen.css) screen;
@import url(print.css) print;
4. 樣式表中使用@media
- screen.less 使用less文件編寫，可安裝Easy LESS插件仙辟，@import引入時還是screen.css
@media screen and (max-width: 768){
.item {
display: none;
}
}
5. and 邏輯與
- 屏幕設(shè)備 在最小寬度768px和最大寬度1000px之間量九，閉區(qū)間
<style media="screen and (min-width: 768px) and (max-width: 1000px)"></style>
6. , 邏輯或
<style media="screen and (max-width: 768px), screen and (min-width: 1000px)"></style>
7. not 邏輯非
<style>
@media not screen and (min-width: 768px) and (max-width: 1000px) {
h1 {
color: red;
}
}
</style>
8. only
- 使用only排除低端瀏覽器沙兰，支持媒體查詢才顯示該樣式槐臀，使用的很少
<style>
@media only screen and (min-width: 768px) and (max-width: 1000px) {
h1 {
color: red;
}
}
</style>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
