CSS在做響應式網頁的時候的順序

我曾經和國外印度的自由工作者交易過，請他們寫響應式的網頁，結果他們CSS寫得一塌糊塗，原因在於@media的設計沒有按照順序。

什麼是照順序

我CSS都以Tailwind CSS語法來舉例。

Tailwind CSS的語法有分比如說sm:（比較窄的螢幕但不是手機的，如iPad）、md:（大概就電腦的螢幕，或者平板橫放）、lg:（大概就是電腦的螢幕才有的寬度）。

詳細的我不舉太多的說明，因為他們官網的Document寫的超清楚的。

正確的CSS設計響應式網頁的順序是，先以最窄的螢幕為設計對象，比如我要設計一個Grid排列的有12 col的，手機我要讓他佔整個列，那我一開始就要：

class=”col-span-12″

然後如果iPad比較窄，我要兩個一列，那就：

class=”col-span-12 sm:col-span-6″

然後平板橫放到窄螢幕的電腦，因為螢幕較寬，想要他只佔1/3，那就：

class=”col-span-12 sm:col-span-6 md:col-span-4″

最後如果電腦螢幕較寬的狀態下要4個一列

class=”col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3″

這樣就是正確的順序，在瀏覽器縮放的時候就會跑的很順。

結論

照這種順序設計，就不太容易出現縮放到一半項目消失或者亂跑位置的問題。