国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS:用rem來做響應式開發

Batkid / 577人閱讀

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

電腦版的商城昨晚做完了，今天趕著做手機端的，提到手機端的網站第一個想到的就是要 適應不同手機屏幕的寬度，保證在不同手機上都能正常顯示給用戶，我之前做這類網站都是無腦引進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的值作為整個頁面的基準尺寸，例如那么1rem=10px;如何做到適配呢？那就要用到js在頁面加載時獲取window的寬度（瀏覽器窗口的寬度）$(window).width();在開發手機頁面的時候，一般我們設置最大寬度為640px，因為640px可以保證在至今最寬的手機上顯示時網頁兩端剛好貼合屏幕，那接下來我就舉一個小例子。

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

html


    
1

    
2

    
3




css

js

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92444.html

相關文章

  • 一行css代碼輕松實現前端響應式布局（vw+rem）

    摘要：大家知道可以用來做響應式布局，只是元素上的樣式需要根據屏幕寬度來指定。今天突然想到這個單位，發現用它來做響應式布局實在太方便了。只需一行屏幕標準寬，全部寬度是，即也就是每像素。這個值也可根據自己需要調整數值。具體實現的完整代碼請參考 大家知道rem可以用來做響應式布局，只是html元素上的font-size樣式需要根據屏幕寬度來指定。 之前有用@media媒體查詢，根據各種屏幕寬度寫h...

    piapia 評論0 收藏0

  • 真的,移動端尺寸自適應與dpr無關

    摘要：做移動端自適應時可能很多人都對自適應和之間的關系產生疑問也有一些人會疑慮比如我的自適應方案沒有加會不會出問題針對這些疑問我說一下我的見解。 做移動端自適應時可能很多人都對自適應和dpr之間的關系產生疑問,也有一些人會疑慮比如我的自適應方案沒有加dpr會不會出問題,針對這些疑問我說一下我的見解。 1. 什么是尺寸自適應 首先標題說的自適應,可能自適應在不同人眼里理解不同，特別與響應式的關...

    omgdog 評論0 收藏0

  • 真的,移動端尺寸自適應與dpr無關

    摘要：做移動端自適應時可能很多人都對自適應和之間的關系產生疑問也有一些人會疑慮比如我的自適應方案沒有加會不會出問題針對這些疑問我說一下我的見解。 做移動端自適應時可能很多人都對自適應和dpr之間的關系產生疑問,也有一些人會疑慮比如我的自適應方案沒有加dpr會不會出問題,針對這些疑問我說一下我的見解。 1. 什么是尺寸自適應 首先標題說的自適應,可能自適應在不同人眼里理解不同，特別與響應式的關...

    617035918 評論0 收藏0

  • 真的,移動端尺寸自適應與dpr無關

    摘要：做移動端自適應時可能很多人都對自適應和之間的關系產生疑問也有一些人會疑慮比如我的自適應方案沒有加會不會出問題針對這些疑問我說一下我的見解。 做移動端自適應時可能很多人都對自適應和dpr之間的關系產生疑問,也有一些人會疑慮比如我的自適應方案沒有加dpr會不會出問題,針對這些疑問我說一下我的見解。 1. 什么是尺寸自適應 首先標題說的自適應,可能自適應在不同人眼里理解不同，特別與響應式的關...

    geekzhou 評論0 收藏0

發表評論

0條評論

Batkid

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<