整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

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

          應(yīng)式布局:只需要開發(fā)一套代碼,只需要一套代碼使頁面適應(yīng)不同的屏幕。

          響應(yīng)式設(shè)計(jì)通過檢測視口分辨率,針對不同客戶端在客戶端做代碼處理,來展現(xiàn)不同的布局和內(nèi)容;

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

          • 百分比布局
          • 媒體查詢布局
          • rem 響應(yīng)式布局
          • vw 響應(yīng)式布局
          • flex 彈性布局


          一、百分比布局

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

          • height、width 屬性的百分比依托于父標(biāo)簽的寬高。但是 padding、border、margin 等屬性的情況又不一樣
          • 1、子元素的 top 和 bottom 如果設(shè)置百分比,則相對于直接非 static 定位(默認(rèn)定位)的父元素的高度,同樣,子元素的 left 和 right 如果設(shè)置百分比,則相對于直接非 static 定位(默認(rèn)定位的)父元素的寬度。
            2、子元素的 padding 和 margin 如果設(shè)置百分比,不論是垂直方向或者是水平方向都相對于直接父親元素的 width,而與父元素的 height 無關(guān)。
          • border-radius 為百分比,則是相對于自身的寬度

          缺點(diǎn):

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

          二、媒體查詢布局

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

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

          <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í)際開發(fā)中,常用的響應(yīng)斷點(diǎn)閾值設(shè)定

          (括號后面是樣式的縮寫)

          • <576px (Extra small)
          • >=576px (Small --- sm)
          • >=769px (Medium --- md)
          • >=992px (Large --- lg)
          • >=1200px (X-Large --- xl)
          • >=1400px (XX-Large ---- xxl)

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

          • a、移動端 到 PC 端適配原則 (min-width 從小到大)
          <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>
          • b、PC 端 到 移動端適配原則 (max-width 從大到小)
          <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í)際開發(fā)時(shí),@media 會結(jié)合刪格系統(tǒng)一起來使用,實(shí)現(xiàn)真正意義上的響應(yīng)式開發(fā)。

          • 柵格布局+斷點(diǎn)設(shè)定 實(shí)現(xiàn)響應(yīng)式
          @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;
          }
          ……

          因代碼過長,完整代碼與文件 可進(jìn)入粉絲群獲取 !

          三、rem 布局

          1、rem 如何適配

          • rem 是相對于 html 根元素的字體大小的單位。
          • 我們通過修改 html 中 font-size 的字體大小來控制 rem 的大小。

          比如:

          html {
           font-size: 10px;
          }
          .box {
           width: 10rem;
           height: 20rem;
          }
          • 當(dāng) html 中 font-size: 10px; 時(shí),此時(shí) 1rem = 10px,所以 box 盒子的寬高分別為:100px 和 200px;
          • 當(dāng)我們把 html 中 font-size: 20px; 時(shí),此時(shí) 1rem = 20px,此時(shí) box 盒子的寬高就為 200px 和 400px;

          2、實(shí)際開發(fā)中如何適配,如何將設(shè)計(jì)稿對應(yīng)的 px 單位轉(zhuǎn)換為 rem 單位

          • 在實(shí)際的開發(fā)中,我們通常會以 750px 的移動端設(shè)計(jì)稿來開發(fā)。
          • 我們在代碼寫完后,統(tǒng)一會把所有 px 單位全部轉(zhuǎn)成 rem 來實(shí)現(xiàn)。

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

          .box {
           width: 700px;
           height: 500px;
           font-size: 20px;
           padding: 10px;
           background-color: red;
          }

          如果我們把總寬 750px 分成 10rem,些時(shí) 1rem = 75px; ,轉(zhuǎn)成對應(yīng)的 rem 單位,就是用對應(yīng)的 px/75px,得到如下結(jié)果。

          .box {
           width: 9.3333rem;
           height: 6.6667rem;
           font-size: 0.2667rem;
           padding: 0.1333rem;
           background-color: red;
          }
          • 以上單位的轉(zhuǎn)換,我們可以利用 vscode 的插件 px to rem 來自動實(shí)現(xiàn)。
          • 把所有代碼全部寫完,然后一次性用 px to rem 插件轉(zhuǎn)換成 rem 單位

          3、接下來如何適配不同的瀏覽器,實(shí)現(xiàn)等比例的縮放呢 ?

          • 比如現(xiàn)在有 5 個(gè)同尺寸的屏幕 (750 640 480 375 320),所有屏幕整體寬分成 10rem
          • 那我們就需要分別得到這幾種不同屏幕下對應(yīng)的 html 根元素的 font-size 大小了。

          屏幕尺寸

          html 中 font-size 大小 (1rem 大小)

          750px

          75px

          640px

          64px

          480px

          48px

          375px

          37.5px

          320px

          32px

          • 我們可以通過 js 來動態(tài)修改不同屏幕尺寸下的 font-size 大小就可以實(shí)現(xiàn)等比例放大和縮小了
          • js 動態(tài)修改 html 根元素的 font-size 的大小,能適配不同尺寸的屏幕,不再局限于這 5 種
          • <script>
            initPage();
            function initPage() {
            var clientWidth =
            document.documentElement.clientWidth || document.body / clientWidth; //獲取屏幕可視區(qū)寬
            var html = document.getElementsByTagName("html")[0]; //獲取html根元素
            html.style.fontSize = clientWidth / 10 + "px"; //動態(tài)設(shè)置font-size大小
            }
            window.onresize = initPage;
            </script>

          注:

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

          • flexible 原理就是根據(jù)不同的屏幕寬度動態(tài)的設(shè)置網(wǎng)頁中 html 根節(jié)點(diǎn)的 font-size
          • 然后咱們將所有的 px 用 rem 來代替,這樣就實(shí)現(xiàn)了不同大小的屏幕都適應(yīng)相同的樣式了。

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

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

          • 100vw = 視圖窗寬度 ,100vh = 100 視圖窗高度
          • 如果移動端有 5 個(gè)不同的視口寬尺寸 750 ,640,480,375,320,則在不同尺寸下,對應(yīng)的 1vw 的 px 值如下表
          • 移動端尺寸1vw750px7.5px640px6.4px480px4.8px375px3.75px320px320px
            • 我們在實(shí)際開發(fā)時(shí),只需要按其中的某一個(gè)尺寸來的 px 單位的設(shè)計(jì)稿來開發(fā)就好(一般是以 750px 的大小為主)
            • 代碼全部開發(fā)好后,我們再利用 vscode 的插件 px to vw 來實(shí)現(xiàn)單位的自動轉(zhuǎn)換。

          案例: 寬為 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>
          • 在寬為 750px 的設(shè)計(jì)稿下,把 px 轉(zhuǎn)換為 vw,是用 px/7.5 得到對應(yīng)的 vw 單位值
          • 轉(zhuǎn)換好后,vw 是自動應(yīng)視口寬的,所以就達(dá)到了響應(yīng)式開發(fā)的效果。


          五、flex 彈性布局

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

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


          • 在父元素上,我們經(jīng)常會用到的有關(guān)彈性布局的屬性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ,這幾個(gè)屬性分別從 主軸的方向、是否換行、項(xiàng)目在主軸上的對齊方式、項(xiàng)目在交叉軸上的對齊方式、項(xiàng)目在多根軸線上的對齊方式來規(guī)范了項(xiàng)目在父元素中的彈性。
          • 在子元素上,我們經(jīng)常會用到的有關(guān)彈性布局的屬性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ,這幾個(gè)屬性分別從 項(xiàng)目的排序、項(xiàng)目放大比例、項(xiàng)目縮小比例、項(xiàng)目占據(jù)主軸空間、單個(gè)項(xiàng)目在交叉軸上的對齊方式來規(guī)范了項(xiàng)目自身的彈性。


          如果你才開始學(xué)前端,可以看看,我們這里有html+css階段完整教程,我們在釘釘群里有全套的課程包含(入門到精通課程、4個(gè)綜合項(xiàng)目(稱之為15天訓(xùn)練營,在群里是從第二十三節(jié)課開始的)、30個(gè)練習(xí)案例!)如果需要,可以掃描下方鏈接,添加我,邀請你進(jìn)入釘釘群學(xué)習(xí)!

          30 天挑戰(zhàn)學(xué)習(xí)計(jì)劃 Web 前端從入門到實(shí)戰(zhàn) | arry老師的博客-艾編程

           node節(jié)點(diǎn)

          動距離

          document.body.scrollTop IE、FF

          document.documentElement.scrollTop chrome

          兼容性寫法:

          var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

          與 document.documentElement 屬性不同的是, document.body 屬性返回 <body> 元素, document.documentElement 屬性返回 <html> 元素。

          根節(jié)點(diǎn)

          有兩種特殊的文檔屬性可用來訪問根節(jié)點(diǎn):

          document.documentElement chome object HTMLHtmlElement

          document.body IE、FF object HTMLBodyElement

          第一個(gè)屬性可返回存在于XML以及HTML文檔中的文檔根節(jié)點(diǎn)(html標(biāo)記)。

          第二個(gè)屬性是對HTML頁面的特殊擴(kuò)展,提供了對<body>標(biāo)簽的直接訪問(body標(biāo)記)。

          窗口尺寸、工作區(qū)尺寸

          可視區(qū)尺寸寬度

          document.body.clientWidth IE、FF

          document.documentElement.clientWidth chome

          兼容性寫法:

          document.documentElement.clientWidth || document.body.clientWidth;

          可視區(qū)尺寸高度

          document.body.clientHeight IE、FF

          document.documentElement.clientHeight chome

          兼容性寫法:

          document.documentElement.clientHeight || document.body.clientHeight;

          獲取瀏覽器窗口水平滾動條的位置

          document.body.scrollLeft;

          document.documentElement.scrollLeft

          兼容性寫法:

          document.documentElement.scrollLeft || document.body.scrollLeft;

          獲取瀏覽器窗口垂直滾動條的位置

          document.body.scrollTop IE、FF

          document.documentElement.scrollTop chrome

          兼容性寫法:

          document.documentElement.scrollTop || document.body.scrollTop;

          注意:IE、FF已經(jīng)支持documentElement對象的各種屬性, 而

          以上兼容性寫法不影響所獲的屬性值

          編寫自定義函數(shù):

          // 獲取瀏覽器窗口的可視區(qū)域的寬度
          function getViewPortWidth() {
          		return document.documentElement.clientWidth || document.body.clientWidth;
          }


          // 獲取瀏覽器窗口的可視區(qū)域的高度
          function getViewPortHeight() {
          		return document.documentElement.clientHeight || document.body.clientHeight;
          }


          // 獲取瀏覽器窗口水平滾動條的位置
          function getScrollLeft() {
          		return document.documentElement.scrollLeft || document.body.scrollLeft;
          }


          // 獲取瀏覽器窗口垂直滾動條的位置
          function getScrollTop() {
          		return document.documentElement.scrollTop || document.body.scrollTop;
          }

          <!DOCTYPE HTML>聲明對JavaScript獲取窗口寬度和高度的影響


          主站蜘蛛池模板: 亚洲一区中文字幕| 国产成人片视频一区二区| 久久久久人妻一区二区三区vr| 中文字幕一区日韩在线视频| 精品少妇一区二区三区在线| 一区二区三区在线看| 国产一区二区三区免费观看在线| 中文字幕AV一区中文字幕天堂 | 中文字幕无线码一区| 久久精品一区二区三区四区| 精品国产一区AV天美传媒| 日本无卡码免费一区二区三区| 精品一区二区三区在线观看l| 在线播放精品一区二区啪视频| 无码精品人妻一区二区三区AV| 亚洲一区二区三区自拍公司| 精品不卡一区二区| 冲田杏梨高清无一区二区| 亚洲国产精品一区二区久久hs | 日美欧韩一区二去三区 | 久久久久久综合一区中文字幕| 国产精品视频一区麻豆| 国产日产久久高清欧美一区| 国产一区二区三区播放| 欧美激情国产精品视频一区二区| 在线精品日韩一区二区三区| 一区二区三区在线|日本| 午夜福利一区二区三区在线观看| 精品国产AV无码一区二区三区 | 国产激情视频一区二区三区| 久久精品无码一区二区三区免费| 全国精品一区二区在线观看| 老熟妇仑乱视频一区二区 | 亚洲国产一区二区a毛片| 国产成人av一区二区三区在线| 久久国产视频一区| 亚洲av成人一区二区三区在线观看| 久久精品动漫一区二区三区| 日韩少妇无码一区二区三区| 伊人久久一区二区三区无码 | 日本伊人精品一区二区三区|