視口元標籤與媒體查詢？

Question

我很想知道，爲了優化您的網站的平板電腦，桌面和smarthpones，什麼是最好的使用：媒體查詢或視口meta標籤？看到代碼：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

VS

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 

Answer 1

我會說每一種情況都不一樣......它不是一種任何一種情況。你在那裏的視口元標記會使網站保持1比1的比例，這在很多情況下是好的。然而，它也設置了用戶可擴展的「否」 - 這意味着用戶將無法放大等...有時候ipad和其他設備改變你的網站的方式是最好的......（取決於）

我已經找到了最好的方法是使用媒體查詢和選擇的2個dirrections一個：從小

1. 開始從大建立
2. 開始，建立上下

將你的瀏覽器窗口拉伸得越來越大（或越來越小），然後在t時刻他的網站變得醜陋，（就在此之前）那是你的下一個斷點......讓媒體查詢......並重復。不要關注所有的設備尺寸---這樣你就會知道，不管是什麼新的設備等等都出來了 - 你已經設計好了它在每一個可能的尺寸上看起來不錯。 （當它低於320 /我喜歡只是使網站變成名片///更好地爲沒有智能手機的可讀信息...）

然後，所有這一切...在設備上測試並嘗試不同的視口元標記。

有很多關於它的優秀文章...使用「響應式設計」或「自適應」或「RWD」響應式網頁設計等關鍵詞。還有祝你好運 ！！！

Answer 2

兩者都是必要的。

媒體查詢被用來爲不同的設備有不同的css，就像不同設備的if條件一樣。

視口元標記是設置告訴設備根據此標記採取寬度。它就像設備的重置，如果其未使用的設備將根據其默認設置調整佈局。

Answer 3

這取決於你想達到什麼。

如果您只想設計桌面分辨率並讓手機瀏覽器「縮小」，並假設桌面的分辨率高於只能使用視口元標記，請將寬度設置爲固定值。

如果您想要一個真正的響應式設計，您應該將視口元標記設置爲設備寬度，並使用媒體查詢爲您的代碼中顯示的不同分辨率計劃佈局。