html： 標簽中的 media 屬性

HTML <link> 標簽的 media 屬性

定義和用法

media 屬性規定被鏈接文檔將顯示在什么設備上。

media 屬性用於為不同的媒介類型規定不同的樣式。

media屬性值 （所有瀏覽器都支持值）

screen 

print 

all

語法

<link media="value">​

 

值	描述
screen	計算機屏幕（默認）。
tty	電傳打字機以及類似的使用等寬字符網格的媒介。
tv	電視機類型設備（低分辨率、有限的滾屏能力）。
projection	放映機。
handheld	手持設備（小屏幕、有限帶寬）。
print	打印預覽模式/打印頁面。
braille	盲人點字法反饋設備。
aural	語音合成器。
all	適用於所有設備。

 

CSS3 @media 查詢

CSS 語法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

你也可以針對不同的媒體使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

@media screen and (max-width: 600px) { /*當屏幕尺寸小於600px時，應用下面的CSS樣式*/
  .class {
    background: #ccc;
  }
}

總結：順序不能反

@media (max-width: 767px)  { ... col-xs-3... }  { //<=767的設備 }  手機
@media (min-width: 768px)  { ... col-sm-3... }  { //>=768的設備 }  平板
@media (min-width: 992px)  { ... col-md-3...}   { //>=992的設備 }  電腦
@media (min-width: 1200px) { ... col-lg-3...}  { //>=1200的設備 }  大顯示器​