響應(yīng)式布局的 5" />

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

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷(xiāo)資訊 > 網(wǎng)站運(yùn)營(yíng) > 盤(pán)點(diǎn)：CSS響應(yīng)式布局的5種實(shí)現(xiàn)方式

盤(pán)點(diǎn)：CSS響應(yīng)式布局的5種實(shí)現(xiàn)方式

時(shí)間：2023-09-23 21:36:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-23 21:36:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

盤(pán)點(diǎn)：CSS響應(yīng)式布局的5種實(shí)現(xiàn)方式：
響應(yīng)式布局：只需要開(kāi)發(fā)一套代碼，只需要一套代碼使頁(yè)面適應(yīng)不同的屏幕。
響應(yīng)式設(shè)計(jì)通過(guò)檢測(cè)視口分辨率，針對(duì)不同客戶端在客戶端做代碼處理，來(lái)展現(xiàn)不同的布局和內(nèi)容；







響應(yīng)式布局的 5 種實(shí)現(xiàn)方案




一、百分比布局

比如，當(dāng)瀏覽器的寬度或者高度發(fā)生變化時(shí)，通過(guò)百分比單位可以使得瀏覽器中的組件的寬和高隨著瀏覽器的變化而變化，從而實(shí)現(xiàn)響應(yīng)式的效果。

缺點(diǎn)：

計(jì)算困難，如果我們要定義一個(gè)元素的寬度和高度，按照設(shè)計(jì)稿，必須換算成百分比單位。

二、媒體查詢布局

通過(guò)@media 媒體查詢，可以通過(guò)給不同屏幕的大小編寫(xiě)不同的樣式來(lái)實(shí)現(xiàn)響應(yīng)式的布局。

響應(yīng)式缺點(diǎn)：如果瀏覽器大小改變時(shí)，需要改變的樣式太多，那么多套樣式代碼會(huì)很繁瑣。

<style> .box { width: 500px; height: 500px; background-color: aqua;} @media screen and (max-width: 1280px) { .box { width: 400px; height: 400px; }} @media screen and (max-width: 980px) { .box { width: 300px; height: 300px; }} @media screen and (max-width: 765px) { .box { width: 200px; height: 200px; }}</style><body> <div class="box"></div></body>1、在實(shí)際開(kāi)發(fā)中，常用的響應(yīng)斷點(diǎn)閾值設(shè)定

（括號(hào)后面是樣式的縮寫(xiě)）

2、在實(shí)際開(kāi)發(fā)中，常用的兩種適配方案

<style> body { background-color: #000;} @media screen and (min-width: 576px) { body { background-color: red; }} @media screen and (min-width: 769px) { body { background-color: yellow; }} @media screen and (min-width: 992px) { body { background-color: blue; }} @media screen and (min-width: 1200px) { body { background-color: green; }} @media screen and (min-width: 1400px) { body { background-color: orange; }}</style><style> body { background-color: #000;} @media screen and (max-width: 1400px) { body { background-color: red; }} @media screen and (max-width: 1200px) { body { background-color: yellow; }} @media screen and (max-width: 992px) { body { background-color: blue; }} @media screen and (max-width: 769px) { body { background-color: green; }} @media screen and (max-width: 576px) { body { background-color: orange; }}</style>3、在實(shí)際開(kāi)發(fā)時(shí)，@media 會(huì)結(jié)合刪格系統(tǒng)一起來(lái)使用，實(shí)現(xiàn)真正意義上的響應(yīng)式開(kāi)發(fā)。

@media screen and (min-width: 576px) { .col-sm-1 { grid-area: auto/auto/auto/span 1;} .col-sm-2 { grid-area: auto/auto/auto/span 2;} .col-sm-3 { grid-area: auto/auto/auto/span 3;}……因代碼過(guò)長(zhǎng)，完整代碼與文件 可進(jìn)入粉絲群獲取 ！

三、rem 布局

1、rem 如何適配

比如：

html { font-size: 10px;}.box { width: 10rem; height: 20rem;}2、實(shí)際開(kāi)發(fā)中如何適配，如何將設(shè)計(jì)稿對(duì)應(yīng)的 px 單位轉(zhuǎn)換為 rem 單位

在 px 單位下，一個(gè)盒子的樣式如下：

.box { width: 700px; height: 500px; font-size: 20px; padding: 10px; background-color: red;}如果我們把總寬 750px 分成 10rem，些時(shí) 1rem = 75px; ，轉(zhuǎn)成對(duì)應(yīng)的 rem 單位，就是用對(duì)應(yīng)的 px/75px，得到如下結(jié)果。

.box { width: 9.3333rem; height: 6.6667rem; font-size: 0.2667rem; padding: 0.1333rem; background-color: red;}3、接下來(lái)如何適配不同的瀏覽器，實(shí)現(xiàn)等比例的縮放呢 ？




屏幕尺寸html 中 font-size 大小 （1rem 大?。?/td>
750px75px
640px64px
480px48px
375px37.5px
320px32px





注：

我們可以用 flexible.js 插件來(lái)幫我們實(shí)現(xiàn)

四、vw、vh 響應(yīng)式布局

vw 和 vh 分別相對(duì)的是視圖窗口的寬度和視口窗的高度。

案例： 寬為 750px 設(shè)計(jì)稿下的某個(gè)元素樣式如下

<style> body { margin: 0;} .box { width: 750px; height: 300px; background-color: red;}</style><body> <div class="box"></div></body>轉(zhuǎn)換為 vw 后的代碼如下：

<style> body { margin: 0;} .box { width: 100vw; height: 40vw; background-color: red;}</style><body> <div class="box"></div></body>


五、flex 彈性布局

彈性布局是一種十分方便的，只需要依賴于 CSS 樣式的實(shí)現(xiàn)響應(yīng)式布局的方式，也是最多用到的一種實(shí)現(xiàn)響應(yīng)式的方法。

彈性布局在父、子元素上都有相對(duì)應(yīng)的屬性來(lái)規(guī)范子元素在父元素中的 “ 彈力 ”。









如果你才開(kāi)始學(xué)前端，可以看看，我們這里有html+css階段完整教程，我們?cè)卺斸斎豪镉腥椎恼n程包含（入門(mén)到精通課程、4個(gè)綜合項(xiàng)目（稱之為15天訓(xùn)練營(yíng)，在群里是從第二十三節(jié)課開(kāi)始的）、30個(gè)練習(xí)案例?。┤绻枰梢話呙柘路芥溄?，添加我，邀請(qǐng)你進(jìn)入釘釘群學(xué)習(xí)！



關(guān)鍵詞：實(shí)現(xiàn),方式,布局,響應(yīng),盤(pán)點(diǎn)

74
73
25
news

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

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