在設計響應式網頁設計時、通常會依瀏覽器視窗的寬度指定不同的設計,包含CSS配置與JavaScript互動效果。
在CSS的世界裡判斷瀏覽器視窗寬度的方法是media query
@media (max-width: 767px)
{
/* CSS here */
/* 當視窗寬度小於767px時執行 */
}
在JavaScript的世界裡,則是使用 $(window).width()來檢測瀏覽器視窗的寬度:
if($(window).width() < 767)
{
// JavaScript here
// 當視窗寬度小於767px時執行
} else {
// JavaScript here
// 當視窗寬度不小於767px時執行
}
但是透過 CSS media query 和 $(window).width()得到的寬度並不相同、二者之間有些微的落差。底下有幾個方法可以解決這個問題:
使用Modernizr.js
Modernizr.js是一個javascript的套件,可以用來檢測瀏覽器的支援性。例如:是否支援觸控動作,是否使用iOS系統…等。在底下的案例中我們要使用 Modernizr.mq()這個方法來檢測瀏覽器的視窗寬度是否符合CSS media query的條件。
var query = Modernizr.mq('(max-width: 768px)');
if (query) {
$('#holder').html('true');
// JavaScript here
// 當CSS media query計算的視窗寬度小於768px時執行
} else {
$('#holder').html('false');
// JavaScript here
// 當CSS media query計算的視窗寬度大於等於769px時執行
}
使用這個方法判斷的結果與使用CSS media query得到的結果一樣,這會減少很多前端開發的困擾、讓我們前端開發的工作變得更輕鬆。
要注意的是Modernizr.mq()只會在網頁載入時執行一次。如果您希望他能在每次瀏覽器視窗變動時都能再執行一次的話、您就要讓他在每次$(window).resize()時再執行一次,調整之後的javascript如下:
function mq() {
var query = Modernizr.mq('(max-width: 768px)');
if (query) {
$('#holder').html('true');
// JavaScript here
// 當CSS media query計算的視窗寬度小於769px時執行
} else {
$('#holder').html('false');
// JavaScript here
// 當CSS media query計算的視窗寬度大於等於769px時執行
}
};
$(window).resize(function() {
mq();
});
mq();
使用enquire.js
enquire.js 是一個輕量的的javascript,唯一的作用就是檢測瀏覽器的視窗寬度是否符合媒體查詢的條件。使用的方法如下:
enquire.register("screen and (max-width: 768px)", {
setup: function() {
$('#holder').html('false');
// JavaScript here
// 網頁載入時執行一次
},
match: function() {
$('#holder').html('true');
// JavaScript here
// 當CSS media query計算的視窗寬度小於769px時執行
// 網頁載入時執行一次
// 之後每次改變視窗時會再執行一次
},
unmatch: function() {
$('#holder').html('false');
// JavaScript here
// 當CSS media query計算的視窗寬度大於等於769px時執行
// 網頁載入時不會執行
// 之後每次改變視窗時會再執行一次
}
});
unmatch 在網頁載入時並不會被執行,這一點在使用的時候必須要注意。setup則只會在網頁載入時執行一次,因此unmatch 和setuo可以做為互補使用。
放棄使用CSS media query
如果放棄使用CSS media query又該如何設置rwd的css樣式呢?很簡單,我們使用javascript來幫符合條件的網頁添加一個樣式名稱:
function windowSize() {
if ($(window).width() < 768) {
$('body').addClass('mobile').removeClass('desktop');
} else {
$('body').addClass('desktop').removeClass('mobile');
$('#holder').html('Desktop Size');
}
};
$(window).resize(function() {
windowSize();
});
windowSize();
上面的javascript用意是:當瀏覽器寬度小於768的時候、幫body添加一個名為 mobile 的樣式,反之則添加desktop。
另外在CSS的部份也要做適當的調整。
原本該是:
body {
font-size: 36px;
}
@media (max-width: 767px) {
p {
color: #72D213;
}
}
@media (min-width: 768px) {
p {
color: #0080ff;
}
}
修改之後變成:
body {
font-size: 36px;
}
body.mobile p { //當瀏覽器寬度小於768的時候
color: #72D213;
}
body.desktop p { //當瀏覽器寬度不小於768的時候
color: #0080ff;
}
這樣子一來也避免掉了JavaScript和CSS media query 所取得的視窗寬度不同的問題。
xxxx
謝謝你的講解~對於RWD的實現方法又了解更多了!