什么是響應(yīng)式

響應(yīng)式就是為了可以" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 響應(yīng)式布局的原理是什么?

響應(yīng)式布局的原理是什么?

時(shí)間：2024-02-14 05:40:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-14 05:40:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

響應(yīng)式布局的原理是什么?：首先你要正確理解什么是響應(yīng)式，然后找出所有可以實(shí)現(xiàn)響應(yīng)式的方法，正確理解每一種響應(yīng)式方法，并且在合適的場(chǎng)景使用合適的方法。最后去探索每個(gè)方法的原理。

什么是響應(yīng)式

響應(yīng)式就是為了可以使用一套代碼實(shí)現(xiàn)多端顯示，比如電腦端，移動(dòng)端，并且可以適應(yīng)不同尺寸的屏幕大小。

常見的響應(yīng)式實(shí)現(xiàn)方法

百分比布局

vh/vw 布局

flex布局

rem布局

媒體查詢

對(duì)于這些布局的使用方法通過(guò)搜索引擎就可以獲得結(jié)果。需要注意的是應(yīng)該盡量少的使用媒體查詢，也就是說(shuō)，媒體查詢是我們最后才應(yīng)該考慮的解決方法。

原理

這里介紹一下 rem 布局的原理，我們知道 rem 作為單位，顯示的大小總是由根元素 html 節(jié)點(diǎn)的字體大小決定的，它的原理很簡(jiǎn)單，代碼實(shí)現(xiàn)如下。

```JavaScript

// 原始配置

function setRem () {

let doc = document.documentElement

let width = doc.getBoundingClientRect().width

let rem = width / 75

doc.style.fontSize = rem + 'px'

}

// 監(jiān)聽窗口變化

addEventListener("resize", setRem);

```



關(guān)鍵詞：原理,布局,響應(yīng)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉