BS3 Media Query
簡介
在 BS3 (Bootstrap 3) 中利用了媒體查詢 (Media Query) 這項技術來依螢幕尺寸調整內容的排版方式。BS3 預設將螢幕區分成 extra small, small, medium, 及 large 四種不同的尺寸。下圖中顯示了適用各尺寸的螢幕大小及「欄」的 CSS 前綴：
在 BS3 v3.3.6 版的 bootstrap.css 中，可以找到如下設定：
@media (min-width: 768px){}
@media (min-width: 992px){}
@media (min-width: 1200px){}
由此可以得知，BS3 v3.3.6 中預設螢幕的尺寸為 extra small，也就是當螢幕寬度小於 768px 時；螢幕寬度介於 768px 至 991px 時，歸入 small 的範圍；螢幕寬度介於 992px 至 1199px 時，歸入 medium 的範圍；螢幕寬度大於等於 1200px 時，則屬於 large 的範圍。決定範圍後，則套用定義於該範圍中的各項 CSS 設定。由於行動裝置的螢幕尺寸日漸增多，有時除了 BS3 預設的幾種尺寸範圍外，還得新增數種，以符合所需。通常主要是調整字體的大小 (font-size) 、留白 (padding)、邊框 （border) 和邊界 (margin)，免得在螢幕上看起來不協調。
範例
範例中建立了三個元件，當改變螢幕尺寸時，如果進入不同定義的尺寸範圍時，也會改變元件的背景顏色及字體的大小。在範例中除了 BS3 預設的四種螢幕尺寸外，又多定義了二種，但不會對預設 col-*-* 的 CSS 類別造成影響，仍舊會依螢幕的尺寸調整排版的方式。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 1000px;
padding: 20px;
}
.element {
border: 2px solid white;
font-size: 3em;
text-align: center;
}
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
.element {
background-color: lightpink;
font-size: 1em;
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
.element {
background-color: lightyellow;
font-size: 1em;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
.element {
background-color: skyblue;
font-size: 2em;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
.element {
background-color: lightgreen;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
.element {
background-color: coral;
}
}
</style>
CSS 中除了原有的查詢定義之外，多定義了兩個媒體查詢的尺寸。 .element{} 設定了元件的基本外觀，在不同的的螢幕尺寸下，再行套用其它的 CSS 屬性。
HTML
<body>
1
2
3
</body>
HTML 中建立了一個 BS3 的 .container-fluid，內含一個 .row，之下含有三個元件，並用 CSS 類別的方式指定了在不同螢幕尺寸下，所要橫跨的欄數。
沒有留言:
張貼留言