使用css或javascript響應式網頁設計？

Question

我打算建立一個使用響應式設計的網站。 我讀了一些關於css媒體查詢的信息。 我想做的是我的網頁布局應該通過使用不同的設備（如PC，平板電腦或智能手機）看起來不同。

如果我使用媒體查詢通過使用屏幕的寬度（以像素為單位）來確定設備，我總是擔心是否會有使用極高ppi屏幕的新設備。 該設備可能會像平板電腦或類似PC一樣受到威脅？

另一種使用用戶代理通過使用userAgent確定設備類別的解決方案。 還有一個問題是，如果設備不能解釋javascript，那么頁面可能會被破壞。

任何可以解決我上述擔憂的出色解決方案？ 或者哪種解決方案更好？

或者我誤解了使用媒體查詢的方法？

謝謝。

Answer 1

CSS是可行的方法，你可以隨時使用像css3mediaqueries.js這樣的js插件為不支持媒體查詢的瀏覽器提供回退，但僅依靠JS來使你的網站響應是一種風險，因為你無法分辨確定用戶是否啟用了Javascript，並且當它未啟用時，它將不再具有響應性。

此外，現在最好的做法是使用em值進行媒體查詢而不是像素，以確保您的網站始終正確縮放。 本文中有關此主題的更多信息。

另一個提示是，您可以根據內容的最佳斷點而不是設備尺寸來確定媒體查詢值，這樣您無論制作了多少新設備，都可以確保您的內容始終正確。

希望有幫助:)

Answer 2

id'親自使用CSS並設置min-width和max-width。 大多數響應式設計現在使用CSS。 這樣，如果市場上有新設備，它將根據它的屏幕尺寸進行調整。

@media screen and (max-width:480px) { }
@media screen and (min-width:481px) { ) etc... etccc....

Answer 3

我更喜歡使用Twtitter Bootstrap而不是使用CSS3媒體查詢來處理各種設備。

Answer 4

我更喜歡在CSS中使用媒體查詢 。 只需在默認CSS之后編寫查詢 ...

@media屏幕和（max-width：600px）{ 在這里只寫下必須更改代碼以響應響應性能的元素 }

.logo {
width: 200px;
height: 80px;
background: url... ;
background-size: 100%;
margin: 0;
}

@media screen and (max-width: 600px) {
.logo {
width: 150px;
height: 60px;
margin: 0 auto;
}
}

不要忘記將視口代碼插入head / HTML。

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

Answer 5

試試jRWD，這是我最近設計的JavaScript模塊。 它使用12行純JavaScript和2個小幫助函數。 它可以在GitHub上獲得， 網址是https://github.com/BlackMagic/jRWD 。

如果您想查看jRWD的運行情況，請訪問http://ieee-qld.org 。 確保檢查源代碼。 最小的JavaScript，最小的CSS樣式表。 也沒有jQuery。