原文:how to write mobile-first css
譯者:huansky
構建響應式**是今天前端開發人員必備的技能。 當我們談論響應式**時,移動優先這個詞立刻就會浮現。
我們知道從移動優先的角度設計的重要性。 不幸的是,關於移動優先的配置方法很少提及。
今天,我想和大家分享一下移動優先的樣式方法,為什麼它會更好,以及如何運用它的魔力。
讓我們了解移動優先和桌面優先之間的差異,然後再深入**為什麼移動優先方法更好。
移動優先的樣式方法意味著樣式首先應用於移動裝置。 高階樣式和其他覆蓋更大的螢幕然後通過**查詢新增到樣式表。
這種方法使用min-width
**查詢。
這裡有乙個簡單的例子:
body }
在上面的例子中,在 600px 以下是紅色背景
。 在 600px 及以上
它的背景就會變成綠色。
另一方面,桌面首先的樣式方法意味著樣式首先應用於桌面裝置。 然後通過**查詢將較小螢幕的高階樣式和覆蓋新增到樣式表中。
這種方法使用max-width
**查詢。
這裡有乙個簡單的例子:
body }
是綠色背景顏色。 如果螢幕低於600畫素,背景顏色將變為紅色。
較大螢幕的**通常比較小螢幕的**更複雜。 這就是為什麼編寫移動優先有助於簡化您的**。
考慮一種情況,你有乙個**的內容側欄布局。.content
佔據了100%的寬度在移動端,桌面上佔 66%。
大多數時候,我們可以依靠預設屬性來為較小螢幕設定內容樣式。 在這種情況下,乙個預設情況下
具有100%的寬度。
如果我們使用移動優先方法,sass **將是:
.content }如果我們改用桌面優先,大多數時間,我們將不得不修復較小視口的預設屬性。 sass**的相同結果是:
.content }通過這個例子,我們節省了兩行**和幾秒鐘來思考令人費解的css。 想象一下,如果你在乙個更大的**上工作,這將節省你多少時間和精力。
大多數時候的min-width
的查詢就足以幫助你編寫乙個**。 然而也存在這樣的例項,組合使用min-width
和max-width
查詢有助於減少複雜度,而這通過單一的min-width
查詢是不可能達到的。
讓我們來**一些這樣例項。
max-width
查詢開始發揮作用,當你想要樣式在一定的視區大小以下受到限制。min-width
和max-width
兩者的結合,將有助於約束兩個不同的視口尺寸之間的樣式。
考慮乙個相簿縮圖的情況。 此相簿在較小視口上連續顯示3個縮圖,在較大視口上連續顯示4個專案。
因為每個專案之間沒有空格,所以它很簡單:
.gallery__item }如果每個專案中有空格,它就會變得很複雜。
假設這些空格佔據了寬度的5%:
.gallery__item我們也將不得不設計最後的(第3項)的
margin-right 為
0,以確保它不會被推下到下一列。
.gallery__item }此**還必須適用於行中有四個專案的情況。 如果我們根據最小寬度查詢我們上面...
不能正常工作的原因是因為我們指定了每個第3項的margin-right 為
0。 此屬性將級聯到更大的視口,並打破我們想要的模式。
我們可以修復每個3的倍數的專案的margin-right
屬性為 5%:
.gallery__item &:nth-child(4n) }這並不是乙個非常好的辦法,因為我們要重複使用}
margin-right
:5% ,如果我們使用更大的顯示螢幕就不得不做改變。
我們應該保持**盡可能dry(不知道怎麼翻譯)。
更好的方法來約束nth-child(3n) 是
在應有的視口中使用max-width
查詢。
這是可行的,因為max-width
將其限制在800畫素內,這樣其他飾扣下就不會受影響。
那些在
min-width
**查詢是非常有用的,當涉及到設計響應式**的時候,因為它降低了**的複雜性。通過上面的例子
,你可以看到min-width
查詢
不可能解決每乙個問題。 有時新增max-width
查詢到您的樣式表來會使事情變得更加方便。
譯 怎樣編寫移動優先的CSS
原文 how to write mobile first css 譯者 huansky 構建響應式 是今天前端開發人員必備的技能。當我們談論響應式 時,移動優先這個詞立刻就會浮現。我們知道從移動優先的角度設計的重要性。不幸的是,關於移動優先的配置方法很少提及。今天,我想和大家分享一下移動優先的樣式方...
(譯)移動的鍵盤控制
mad sci 著 在這篇教程中我主要講用鍵盤事件觸發不同的移動型別,我們將從簡單的開始,然後再完成一些先進的編碼技術,我假設你熟悉了flash 2k4也受用哦 的指令碼語言,讓我們從簡單的開始.場景大小為 準備乙個mc放到時間軸 onclipevent enterframe 這樣你就可以用 上,下...
移動裝置上的NativeWindow 譯
原文 replacing nativewindow on mobile devices and tvs air nativewindow api 是air桌面應用的主要組成部分,用來在螢幕上開啟多個視窗,每乙個視窗都有它們自己的stage。在移動裝置和tvs上,這個類是不被支援的。那麼,乙個應用又是...