CSS顯示隱藏RWD回應式(響應式)網頁

發表留言 人氣: 72°c


RWD(Responsive Web Design)中文稱為回應式網頁設計、自適應網頁設計、響應式網頁設計等,是一種可以讓網頁的版面可以隨著不同的數碼裝置(如:PC電腦、智能手機、平板電腦)的寬度與高度自動調整螢幕畫面。
這幾天製作回應式網頁,經常需要使用到一個代碼,使網頁在不同的螢幕顯示不同的畫面,而且可以運用到廣告平台,在手機或電腦呈現不同的效果。

首先說明一下 max-min- 之間的差別。
max-:表示這個數字以(包含)的都適用。
min-:表示這個數字以(包含)的都適用。

自動顯示
CSS:
@media (min-width:420px) {
.display-in-mobile {
display: none;
}
}

HTML:
<div class="display-in-mobile">只在手機或平板看到我</div>
說明:當螢幕的寬度少於「420PX」像素才會顯示出來。
解析:適合在智能手機或平板電腦顯示相關的內容。

自動隱藏
CSS:
@media (max-width:320px) {
.hide-in-ads {
display: none;
}
}
.hide-in-ads {
width: 336px;
clear: both;
}

HTML:
<div class="hide-in-ads">廣告代碼</div>
說明:當螢幕的寬度少於「320PX」像素會隱藏物件。
解析:適合在智能手機或平板電腦隱藏相關的內容。

And 使用方法
單一條件:
@media screen and (orientation: portrait) {
.css {}
}

說明:如果螢幕視窗為直立,就套用這些css設定。
螢幕視窗橫向寫法: orientation:landscape

同時符合兩種條件:
@media screen and (min-width: 400px) and (max-width: 700px) {
.css {}
}

說明:螢幕寬度在 400px ~ 700px 之間,就套用這些 css 設定。

兩種條件!符合一種即可:
@media screen and (color), projection and (color) {
.css {}
}

說明:如果是彩色螢幕,或彩色投影機,就套用這些 css 設定。

Only 使用方法

有的瀏覽器並不支援 Media Queries,但支援 Media Type,所以我們可以用Only來阻擋這些瀏覽器。

<link rel="stylesheet" type="text/css" href="test.css" media="only screen and (color)">

說明:
支援 Media Queries & Media Type 的瀏覽器:如果是彩色螢幕,就會讀取 test.css。
不支援 Media Queries,但支援 Media Type 的瀏覽器:因為有寫 Only 條件,所以不會往下讀「彩色螢幕」,所以不會呼叫 test.css
不支援 Media Queries & Media Type 的瀏覽器:不管有沒有 Only,都不會呼叫 test.css

Not 使用方法

Not 是用來排除某些設備的樣式,假設你希望這個樣式只在 A 設備有作用, B 設備完全沒用,就可以使用 Not 囉。

舉例如下:
@media not screen and (color), print and (color) {
.css {}
}

說明:彩色螢幕不會套用 css 設定,彩色印表機會套用 css 設定

我們也可以換個寫法,用數學運算子的括號先決,應該會比較清楚:@media (not (screen and (color))), print and (color)

針對不同的媒體使用不同的樣式表
下面來解釋一下遇到衝突時的機制:
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 800px)">
<link rel="stylesheet" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">

說明:上面將設備分成3種,分別是寬度大於800px時,應用styleA ,寬度在600px到800px之間時應用styleB ,以及寬度小於600px時應用styleC 。那假如寬度正好等於800px時該應用那個樣式?是styleB,因為前兩條表達式都成立,按CSS默認優先級規則後者覆蓋了前者。

因此,為了避免衝突,這個例子正常情況應該這樣寫:
<link rel="stylesheet" href="styleA.css" media="screen">
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">

常用的幾種屏幕寬度設定
@media screen and (min-width: 1200px) {
css-code;
}
@media screen and(min-width: 960px) and (max-width: 1199px) {
css-code;
}
@media screen and(min-width: 768px) and (max-width: 959px) {
css-code;
}
@media screen and(min-width: 480px) and (max-width: 767px) {
css-code;
}
@media screen and (max-width: 479px) {
css-code;
}

若網主使用的程序是「WordPress」可以使用以下的代碼,在不同的裝置顯示或隱藏物件。
Code:
<?php if (wp_is_mobile()) { ?>
手機版顯示的內容
<?php } ?>

::或::
<?php if (! wp_is_mobile()) { ?>
電腦版顯示的內容
<?php } else if (wp_is_mobile()) { ?>
手機版顯示的內容
<?php } ?>

測試代碼: www.ifreesite.com/runcode.htm

標籤: | 短網址