響應式的實現總結

2021-10-03 18:20:15 字數 636 閱讀 9626

實現響應式沒有絕對的方法,下面是幾個籠統的辦法:

1. 通過rem實現響應式布局

rem單位都是相對於根元素html的font-size來決定大小的。因此,如果通過rem來實現響應式的布局,只需要根據檢視容器的大小,動態的改變font-size即可。

function refreshrem() 

win.addeventlistener('resize', refreshrem);

2. flex彈性盒子布局

3. **查詢

(user-scalable = no 屬性能夠解決 ipad 切換橫屏之後觸控才能回到具體尺寸的問題。 )

4. 百分比布局

5. vw/vh 視寬單位

這裡說下**查詢,每個**查詢都會增加維護的成本,應避免濫用,下面是一些避免不必要的**查詢的建議 總結

總的來說,實現響應式的思路是盡最大努力實現彈性可伸縮的布局,並在**查詢的各個斷點區間內指定相應的尺寸。

響應式總結

一 響應式頁面 1 響應式 的兩種形式 2 響應式 的兩種技術 二 螢幕大小分類 1 超小螢幕 手機,小於768px 2 小螢幕 平板,大於等於768px media max width 992px 3 中等螢幕 桌面顯示器,大於等於992px media min width 992px 4 大螢幕...

響應式實現

一 css實現響應式 css響應式的實現主要依賴於css 查詢 查詢包含乙個可選的 型別和零或多個表示式來限制使用 特性的樣式表範圍,例如 width,height,color。css3中的media queries讓內容的呈現可以只針對特定範圍的輸出裝置而不必去改變內容本身。即通過 查詢判斷螢幕寬...

響應式布局總結

言歸正傳,博主因為是刨根問底攔不組的,所以在此就往響應式設計的祖墳上刨,深入了解下這四個步驟。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候,首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局,頁面固定寬度大小,我覺得這個對在座的各位沒有任何難度。如果完...