媒體查詢方法總結

媒體查詢常用方法

了解CSS中的width、device-width、resolution、aspect-ratio

• width/height ：定義輸出設備中的 頁面可見區域寬度/高度。

• device-width/height ：定義輸出設備的屏幕可見寬/高度。

• resolution ：定義設備的分辨率。如：96dpi, 300dpi, 118dpcm

• aspect-ratio ：定義輸出設備中的頁面可見區域寬度與高度的比率。

了解media樣式的使用方法

1. 一種方法是直接在link中判斷設備的尺寸，然后引用不同的css文件：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
//示例
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

2. 另一種方法是直接寫在 style 標簽里：

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

單個范圍后面覆蓋

@media screen and(min-width: 1100px) {
body{font-size: 20px}
} 
@media screen and(min-width: 1280px) {
body{font-size: 22px;}
} 

@media screen and(min-width: 1366px) {

body{font-size: 24px;}
}  

@media screen and(min-width: 1440px) {
body{font-size: 26px }
} 

@media screen and(min-width: 1680px) {
body{font-size: 28px;}
} 
@media screen and(min-width: 1920px) {
body{font-size: 30px;}
} 
/* min-width:尺寸從小到大  max-width:尺寸大小從大到小 

寫定的范圍

• 4096 * 2560
• 2560 * 1440
• 1920 * 1080
• 1600 * 900
• 1440 * 900
• 1280 * 720

@media screen and (min-width: 1280px) and (max-width: 1440px) {}
@media screen and (min-width: 1441px) and (max-width: 1600px) {}
@media screen and (min-width: 1601px) and (max-width: 1920px) {}
@media screen and (min-width: 1921px) and (max-width: 2560px) {}
@media screen and (min-width: 2560px) and (max-width: 4095px) {}

相關鏈接：https://blog.csdn.net/zhouzuoluo/article/details/95756442?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.no_search_link