媒體查詢的用法

標籤：

@media all and (min-width:840px)  //所有最小水平螢幕寬度為800像素的螢幕應用規則@media (min-width:800px)              //簡寫方式，同上@media (min-width:800px) and (max-width:1200px)    //所有介於800px和1200px之間的螢幕應用規則@media (min-width:800px) or (orentation:portrait)         //寬度至少是800px或方向是縱向的，則會應用該規則@media (not min-width:800px)        //當最小寬度不是800px時 ，則會用此規則@media (width:800px) and (height:400px)         //當螢幕正好是800px寬，400px高時應用規則@media (min-width:700px),handheld and (orentation:landscape)    //最小寬度為700px或是橫屏的手持功能上，同時應用樣式

　　媒體查詢應用方式有兩種：

1、link元素中的css媒體查詢

<link rel="stylesheet" media="(max-width:800px)" href="eg.css" />

2、樣式表中的css媒體查詢

@media (max-width:600px){  .div1{         display:none;    }  }

媒體查詢的最佳實務：

小螢幕（平板，大於等於768px）

@media (min-width:768px){......}

 中等螢幕（案頭顯示器，大於等於992px）

@media (min-width:992px){......}

大螢幕（大案頭顯示器，大於等於1200px）

@media (min-width:1200px){......}

 

媒體查詢的用法