javascript用rem來做響應式開發

來源：懂視網責編：小采時間：2020-11-27 22:21:48

javascript用rem來做響應式開發

javascript用rem來做響應式開發:電腦版的商城昨晚做完了，今天趕著做手機端的，提到手機端的網站第一個想到的就是要適應不同手機屏幕的寬度，保證在不同手機上都能正常顯示給用戶，我之前做這類網站都是無腦引進bootstrap的。但前一個項目做完之后我發現bootstrap雖好，但里面的各種樣式我

推薦度：

點擊下載本文 文檔為doc格式

導讀javascript用rem來做響應式開發:電腦版的商城昨晚做完了，今天趕著做手機端的，提到手機端的網站第一個想到的就是要適應不同手機屏幕的寬度，保證在不同手機上都能正常顯示給用戶，我之前做這類網站都是無腦引進bootstrap的。但前一個項目做完之后我發現bootstrap雖好，但里面的各種樣式我

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

1.百分比法：

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

2.媒體查詢：

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

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

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

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

...（你還可以設置更多節點）

用媒體查詢的話要保證每個像素下都有對應的適配效果顯然你要設置更小的寬度范圍；

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

rem就是將根節點html的font-size的值作為整個頁面的基準尺寸，例如<html style="font-size:10px">那么1rem=10px;如何做到適配呢？那就要用到js在頁面加載時獲取window的寬度（瀏覽器窗口的寬度）$(window).width();在開發手機頁面的時候，一般我們設置最大寬度為640px，因為640px可以保證在至今最寬的手機上顯示時網頁兩端剛好貼合屏幕，那接下來我就舉一個小例子。

屏幕放大縮小這三個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;
 //我這里設置html的font-size:20px;最大
寬為640px,即相當于640/20=32rem;一行有3個div，所以每個div寬10.6rem

你也可以像論壇里面講的那樣設置html的font-size：62.5%;因為瀏覽器默認像素16px;乘以62.5%之后為整數10px;方便計算

 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的時候
對應html的font-size為20，那么寬度為w是對應
的font-size可這么求
 $('html').css('fontSize',size+'px');
 }
 }
</script>

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascript用rem來做響應式開發

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用開發 js

熱門焦點

javascript用rem來做響應式開發

javascript用rem來做響應式開發

javascript用rem來做響應式開發

最新推薦

猜你喜歡

熱門推薦