完全響應網站與媒體查詢

-1

當我爲所有設備開發網站時，我總是會回到同樣的問題。完全響應網站與媒體查詢

通過在百分比值中設置everthing或使用css3查詢幾個最大寬度和最小寬度，讓所有事情都具有完全響應能力更有意義，因此您可以使用960像素的普通網站並根據不同的尺寸縮小尺寸設備..

對於CSS3 mediaqueries我會用這樣的：

/* CSS */ 
/* Basic responsive */ 
@media screen and (max-width: 960px) { 
/* ..custom CSS for viewports less than 960 here */ 
header { /*...*/ } 
section { /*...*/ } 
footer { /*...*/ } 
/* etc.. */ 
} 

/* iPads (portrait) and similar tablets */ 
@media only screen 
and (min-device-width : 768px) { 
header { /*...*/ } 
section { /*...*/ } 
footer { /*...*/ } 
/* etc.. */ 
} 

/* Smartphones */ 
@media only screen and (max-device-width : 480px) { 
header { /*...*/ } 
section { /*...*/ } 
footer { /*...*/ } 
/* etc.. */ 
}

謝謝

來源

2014-01-27 Marc Ster

你應該做一下。如果你可以寫一些適用於所有設備的CSS，那很好。例如，如果您的標題爲每個設備的寬度的100％，則無需使用媒體查詢進行調整。事實上，你會發現某些部分不起作用，需要調整。這是媒體查詢進來的地方。

您不應該將每個媒體查詢作爲新的樣式表處理，而應該改變或構建已定義的樣式以使佈局工作。

通常，網站採用移動優先方式。這意味着您從移動版面開始，並隨着視口寬度的增加而增加複雜性。這樣做的好處是，舊版瀏覽器將獲得該網站的簡單移動版本（至少應該可以工作，即使它在桌面上不是很漂亮）。

您可以在此處詳細瞭解自適應版式：

Build a Responsive, Mobile-Friendly Website From Scratch

Common Techniques in Responsive Web Design

來源

2014-01-27 11:40:53 jd182

+1：乾淨的說明:) – NoobEditor

如果我想爲平板電腦和智能手機開發html5應用程序，它會改變一些東西嗎？我認爲查詢所有顯示尺寸要比以百分比顯示更難。 –

您不需要單獨查詢每個設備。您可能會構建一個響應式網站，該網站可處理從200像素寬的視口到1500像素寬的視口以及3或4個媒體查詢的所有內容。您需要使用多少媒體查詢更多取決於佈局的複雜程度，而不是其需要多少設備。不要認爲使用百分比或媒體查詢時，它們一起工作。即在移動設備上，20％的列變得太小，因此您使用媒體查詢將其設置爲100％，因此它會在主要內容下堆疊，或者您可能完全隱藏它。 – jd182

如果你在這樣的混亂下跌，我會建議選擇bootstrap

...否則，using media-queries is a better選項，因爲它給你更大的靈活性和自由設置pixels以及percentages的值。

來源

2014-01-27 11:39:58 NoobEditor

兩者的結合，或媒體查詢。

來源

2014-01-27 11:49:33 Dijon

您必須記住，如果您不使用媒體查詢，在每臺設備（智能手機，臺式機，筆記本電腦等）上加載網站的所有數據。如果你加載所有的數據也加載，例如。圖像，並且可能花費很多Kb發送到客戶端瀏覽器。

通過媒體查詢，您可以將display: none;設置爲頁面上的圖像，而更少的Kb將發送給客戶端。

因此，瞭解表單移動設備應儘可能少地發送數據，這一點很重要。

來源

2014-01-27 11:58:32

這是正確的嗎？我一直認爲「display：none」只會隱藏圖片，但它仍然會被移動設備瀏覽器加載 –

對，我的壞:)但無論如何與顯示：無;頁面會變得更胖，在移動設備上需要什麼 –

好。謝謝你的建議 –

完全響應網站與媒體查詢

回答

相關問題