@sandijs ruluks早在2023年就針對響應式設計提出九大基本設計原則。
響應式 vs. 自適應網頁設計
很看起來似乎相同，但事實並非如此。兩種方法相輔相成，所以沒有對與錯之分
內容流
隨著螢幕尺寸變小，內容開始佔據更多的垂直空間，並且下面的任何內容都會被下推，這稱為流。如果習慣於使用畫素和點進行設計，那可能很難理解，但是當您習慣使用畫素和點進行設計時，這是很有意義的。
相對單位
畫布可以是台式電腦，移動螢幕或介於兩者之間的任何內容。畫素密度也可能變化，因此我們需要靈活的單元並可以在任何地方工作。這就是相對單位（如百分比）派上用場的地方。因此，設定內容為50％寬意味著它將始終佔據螢幕的一半（或視口，即開啟的瀏覽器視窗的大小）。
其他自適應方案：
斷點
斷點允許布局在預定義的點更改，即在桌面上有3列，而在移動裝置上只有1列。大多數css屬性可以從乙個斷點更改為另乙個斷點。通常，放置的位置取決於內容。如果句子中斷，則可能需要新增乙個斷點。但是，請謹慎使用它們-當難以理解是什麼在影響什麼時，它會很快變得混亂。
最大值和最小值
有時，就像在移動裝置上一樣，內容佔據螢幕的整個寬度非常好，但是將相同的內容延伸到電視螢幕的整個寬度通常會變得毫無意義。這就是為什麼min / max值有幫助的原因。例如，寬度為100％，最大寬度為1000px，則意味著內容將填滿螢幕，但不會超過1000px。
巢狀物件
mobile優先 還是desktop優先
從技術上講，如果專案從較小的螢幕開始到較大的螢幕（移動優先）開始，或者反之亦然（桌面優先）開始，則沒有太大區別。但是，如果您先從移動裝置入手，它會增加額外的限制並幫助您做出決策。人們經常從兩端開始，因此，確實，去看看哪種方法對您更有效。
您的圖示是否有很多細節並應用了一些奇特的效果？如果是，請使用位圖。如果沒有，請考慮使用向量影象。對於位圖，請使用jpg，png或gif；對於向量，最好的選擇是svg或圖示字型。每個都有優點和缺點。但是請記住大小-未經優化，任何都不能上網。另一方面，向量通常很小，但是某些較舊的瀏覽器不支援。另外，如果它有很多曲線，則它可能比位圖重，因此請明智地選擇。
設計的四大基本原則
設計的四大基本原則 對比 重複對齊 親密性1 親密性 根本目的 親密性的根本目的是實現組織性。儘管其他原則也能達到這個目的，不過利用親密性原則，只需簡單地將相關的元素分在一組建立更近的親密性，就能自動地實現條理性和組織性。如果資訊很有條理，將更容易閱讀，也更容易被記住。此外還有乙個很好的 副產品 利...
設計模式 六大基本原則
軟體實體 類 模組 函式等 應該可以擴充套件 但是不可修改。俗稱 對於拓展是開放的，對於修改是關閉的 軟體開發中，前期通過需求分析 建模，巧妙利用設計模式 使系統盡可能的易維護 易拓展 健壯 當需求變化時能夠方便的對原有系統進行擴充套件 新增模組 新增方法 而不是為了滿足需求 直接在原有 上進行改動...
設計模式 6大設計原則
目錄 1 單一職責原則 2 黎克特制替換原則 3 依賴倒轉原則 4 介面隔離原則 5 迪公尺特法則 6 開閉原則 7 合成 聚合復用原則 single responsibility principle 應該有且僅有乙個原因引起類的變更。乙個介面包含了兩個或多個職責，而且這兩個或多個職責的變化不相互影...