針對不同屏幕尺寸構建網站的最佳做法

構建網站的最佳做法是使用不同屏幕尺寸進行編碼，例如，調整瀏覽器大小，甚至查看專爲桌面瀏覽器大小（如800X600或更高）設計的佈局時。我更多的是後端開發人員，現在，我不得不在我想使用jQuery Mobile的地方構建一個Web應用程序。我只是希望桌面的佈局也發生變化。到目前爲止，我只知道媒體類型。有什麼更好的解決方案像框架一樣。感謝針對不同屏幕尺寸構建網站的最佳做法

來源

2013-05-20 Noor

只是谷歌響應佈局。有很多框架可以幫助你。 [a]（http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design）[b]（http://learn.shayhowe.com/advanced-html-css/responsive-網頁設計） –

哦，是啊...並且談論框架，我使用並且更喜歡其餘的Skeleton 1.2（純CSS）。這很棒，我一直在用我的所有項目都沒有問題。（www.getskeleton.com） –

@Santz，它可以用於jQuery的移動？ – Noor

既可以使用客戶端中的CSS媒體的查詢來指定行爲

@媒體查詢（最小寬度：320像素）{ .do_not_show_on_small {顯示：無}

}

MDN Media Query Info

或使用服務器後端，並期待在用戶代理併發送回不同的HTML ...

http://www.whatsmyuseragent.com/

然後服務器邏輯的一個例子是這樣的：

if (ff8) then 
    send (browser_html.html) 
else if (android os) 
    sned (mobile_html.html)

（當然這可能是不同的模板使用模板引擎相同的數據）。

來源

2013-05-20 22:28:23

需要這些文件上的頭：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

而這些都是標準的媒體查詢

/* #MEDIA QUERIES 
================================================== */ 

/* Tablet Portrait size to standard 960 (devices and browsers) */ 
@media only screen and (min-width: 768px) and (max-width: 959px) { 
    body {min-width: 768px; } /* example */ 
} 

/* All Mobile Sizes (devices and browser) */ 
@media only screen and (max-width: 767px) { 
    body {min-width: 320px; } /* example */ 
} 

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
@media only screen and (min-width: 480px) and (max-width: 767px) { 
    body {min-width: 420px; } /* example */ 
}

祝您好運！檢查我的網站，看看它是如何工作的：www.santz.net

來源

2013-05-20 23:25:42

針對不同屏幕尺寸構建網站的最佳做法

回答

相關問題