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

Batkid 發(fā)布于2019-08-22 13:47 / 571人閱讀

摘要：電腦版的商城昨晚做完了，今天趕著做手機端的，提到手機端的網(wǎng)站第一個想到的就是要適應(yīng)不同手機屏幕的寬度，保證在不同手機上都能正常顯示給用戶，我之前做這類網(wǎng)站都是無腦引進的。

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

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

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

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){/電腦中樣式/}

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

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

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

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

html

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