javascript用rem來做響應(yīng)式開發(fā)

發(fā)布時(shí)間：2020-10-14 20:48:17 來源：腳本之家閱讀：126 作者：yuezhongbao 欄目：web開發(fā)

電腦版的商城昨晚做完了，今天趕著做手機(jī)端的，提到手機(jī)端的網(wǎng)站第一個(gè)想到的就是要適應(yīng)不同手機(jī)屏幕的寬度，保證在不同手機(jī)上都能正常顯示給用戶，我之前做這類網(wǎng)站都是無腦引進(jìn)bootstrap的。但前一個(gè)項(xiàng)目做完之后我發(fā)現(xiàn)bootstrap雖好，但里面的各種樣式我利用的很少，最多用到它排版，當(dāng)網(wǎng)站最后上傳的時(shí)候你會(huì)發(fā)現(xiàn)，即使壓縮之后，它也會(huì)占用相當(dāng)大的一部分，所以這次我想自己用原生寫，響應(yīng)式開發(fā)（我現(xiàn)在知道的尚淺）目前我了解有

1.百分比法：

顧名思義，頁面的元素的margin，padding，width，height，等等都用%來計(jì)算，CSS中的百分比中的百指的是什么，指的是父元素，所有百分比都是這樣的。子元素寬度50%，那么父元素的寬度就是百，子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。所以body默認(rèn)寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了，這只適合布局簡單的頁面，復(fù)雜的頁面實(shí)現(xiàn)很困難。

2.媒體查詢：

這個(gè)是css3中給出的，我們要解決的問題是適應(yīng)手機(jī)屏幕，這個(gè)媒體查詢正是為解決這個(gè)問題而生，媒體查詢的功能就是為不同的媒體設(shè)置不同的css樣式，這里的“媒體”包括頁面尺寸，設(shè)備屏幕尺寸等，最常用的形式

phone:@media screen and (max-width：767px) {/手機(jī)中樣式/}

pad：@media screen and (max-width：991px)and(min-width:768) {/平板中樣式/}

pc:@media screen and (min-width：992px){/電腦中樣式/}

...（你還可以設(shè)置更多節(jié)點(diǎn)）

用媒體查詢的話要保證每個(gè)像素下都有對(duì)應(yīng)的適配效果顯然你要設(shè)置更小的寬度范圍；

3.還有就是css3的單位rem：

rem就是將根節(jié)點(diǎn)html的font-size的值作為整個(gè)頁面的基準(zhǔn)尺寸，例如<html >那么1rem=10px;如何做到適配呢？那就要用到j(luò)s在頁面加載時(shí)獲取window的寬度（瀏覽器窗口的寬度）$(window).width();在開發(fā)手機(jī)頁面的時(shí)候，一般我們設(shè)置最大寬度為640px，因?yàn)?40px可以保證在至今最寬的手機(jī)上顯示時(shí)網(wǎng)頁兩端剛好貼合屏幕，那接下來我就舉一個(gè)小例子。

javascript用rem來做響應(yīng)式開發(fā)

屏幕放大縮小這三個(gè)div也同樣還在一行等比放大縮小

html

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

css

<style>
  html{font-size: 20px;}
  .container{
    max-width: 640px;
    border:1px solid red;
    margin:0 auto;
    overflow: hidden;
    box-sizing: border-box;
  }
  .box{
    float: left;
    width:10.6rem;
    //我這里設(shè)置html的font-size:20px;最大
寬為640px,即相當(dāng)于640/20=32rem;一行有3個(gè)div，所以每個(gè)div寬10.6rem

你也可以像論壇里面講的那樣設(shè)置html的font-size：62.5%;因?yàn)闉g覽器默認(rèn)像素16px;乘以62.5%之后為整數(shù)10px;方便計(jì)算

    height:10.6rem;
    border:1px solid #000;
    box-sizing: border-box;
  }
</style>

<script>
 window.onresize = window.onload = function () {
   var w = $(window).width();
   if(w<640){
     var size = 20*w/640;//640的時(shí)候
對(duì)應(yīng)html的font-size為20，那么寬度為w是對(duì)應(yīng)
的font-size可這么求
     $('html').css('fontSize',size+'px');
   }
 }
</script>

注意這里有一個(gè)小坑，當(dāng)你把這個(gè)小demo拿到谷歌瀏覽器里面驗(yàn)證的時(shí)候，你會(huì)發(fā)現(xiàn)開始這3個(gè)div會(huì)隨著你瀏覽器窗口縮小而縮小，到達(dá)某個(gè)值后就不動(dòng)了，原因是谷歌瀏覽器默認(rèn)支持html的font-size最小值為10px;在小于這個(gè)值就不會(huì)再小了，這是我當(dāng)時(shí)碰到的問題花了快兩個(gè)小時(shí)上網(wǎng)找，一遍遍演示也都沒想明白，最后終于查到這么個(gè)非人為原因.

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

javascript用rem來做響應(yīng)式開發(fā)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽