2013-01-14 95 views
0

此刻我試圖通過各地響應式設計頭就搞定了。我經常聽到的一句話是'Mobile first!',我明白這意味着什麼,但我仍然不確定如何將其付諸實踐。響應式設計 - 320及以上 - 如何使用媒體查詢?

我正在使用320和up toolkit /樣板已經有一些媒體查詢集:。min-width: 480pxmin-width: 600pxmin-width: 768pxmin-width: 992px & min-width: 1382px
正如你可能注意到了,像min-width: 320px缺少

這是否意味着我設計我的網頁的媒體查詢之外的320像素的寬度,然後使用媒體查詢覆蓋某些需要調整的位?

+1

這意味着你的mediaqueries以外的第一設計應着眼於320寬度,因爲它會使用任何被指定。然後你(可以)在480,600,768,992等等的設置水平上改變它。 –

回答

2

你應該先寫你的CSS沒有這些媒體查詢。其實你應該忽略那些媒體查詢。

一旦你得到了你的「移動」 CSS到位(有你的瀏覽器窗口中實小)開始調整您的瀏覽器窗口。當事情開始看起來很奇怪時,例如,太多的空白行越來越長,爲這個最小寬度添加一個新的媒體查詢。

在新的媒體查詢您調整爲奇看的東西,一旦你做到了這一點再次開始擴大,繼續這樣做,直到你達到一個地步,你覺得你有足夠的覆蓋屏幕房地產。

沒有因爲有成千上萬不同的設備在那裏,所以你不能在你的斷點真正看到你的設計在行動之前決定一個設備的寬度。