Bootstrap基礎必讀(三) HTML中螢幕尺寸标準 媒體查詢

除了上面圖檔，bootstrap官網中提到的四個尺寸，再細化一些，并補充一些内容。

CSS2允許使用者對特定media類型制定樣式。

例如：

@media screen{ … } 針對電腦螢幕，平闆，手機。

@media print{ … } 針對列印機，列印預覽。

@media all{ … } 用于所有媒體裝置類型 。

有些地方有兩種寫法：

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

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

這兩種寫法意義上沒有差别，後者為縮寫省略，一般都使用screen，是以可以直接使用縮寫形式。

1.以最大寬度為标準。數值大在上，數值小在下。

@media only screen and (max-width: 1259px){}
@media only screen and (max-width: 1199px){}
@media only screen and (max-width: 992px) {}
@media only screen and (max-width: 768px) {}
@media only screen and (max-width: 479px) {}
           

2.以最小寬度為标準。數值小在上，數值大在下。

@media screen and (min-width: 479px) {}
@media screen and (min-width:767px) {}
@media screen and (min-width:992px) {}
@media screen and (min-width: 1200px) {}
@media screen and (min-width: 1399px) {}
           

3.進階寫法

@media only screen and (min-width: 480px) and (max-width: 768px) {}
@media only screen and (min-width: 320px) and (max-width: 479px) {}
           

4.媒體查詢其他用法

1. <link media="screen and (max-width:480px)" rel="stylesheet" href="example.css" target="_blank" rel="external nofollow" />

2. <style type="text/css" media="screen and (min-width:320px) and (max-width:480px)"> @import url("css/style.css"); </style>

相關英語

viewport = 視口

content = 内容

device-width = 裝置寬度

initial-scale = 初始-比例

minimum-scale = 最小-比例

maximum-scale = 最大-比例

media = 媒體

query = 查詢