日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
利用視口單位實現(xiàn)適配布局

響應(yīng)式布局的實現(xiàn)依靠媒體查詢( Media Queries )來實現(xiàn)，選取主流設(shè)備寬度尺寸作為斷點針對性寫額外的樣式進行適配，但這樣做會比較麻煩，只能在選取的幾個主流設(shè)備尺寸下呈現(xiàn)***適配。

即使是通過 rem 單位來實現(xiàn)適配，也是需要內(nèi)嵌一段腳本去動態(tài)計算根元素大小。

近年來，隨著移動端對視口單位的支持越來越成熟、廣泛，使得我們可以嘗試一種新的辦法去真正地適配所有設(shè)備尺寸。

認(rèn)識視口單位( Viewport units )

首先，我們要了解什么是視口。

在業(yè)界，極為推崇的一種理論是 Peter-Paul Koch (江湖人稱“PPK大神”)提出的關(guān)于視口的解釋——在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區(qū)域;而在移動端較為復(fù)雜，它涉及到三個視口：分別是 Layout Viewport(布局視口)、 Visual Viewport(視覺視口)、Ideal Viewport。

而視口單位中的“視口”，在桌面端，毫無疑問指的就是瀏覽器的可視區(qū)域;但是在移動端，它指的則是三個 Viewport 中的 Layout Viewport 。

視口單位中的“視口”

根據(jù)CSS3規(guī)范，視口單位主要包括以下4個：

vw : 1vw 等于視口寬度的1%

vh : 1vh 等于視口高度的1%

vmin : 選取 vw 和 vh 中最小的那個

vmax : 選取 vw 和 vh 中***的那個

視口單位區(qū)別于%單位，視口單位是依賴于視口的尺寸，根據(jù)視口尺寸的百分比來定義的;而%單位則是依賴于元素的祖先元素。

用視口單位度量，視口寬度為100vw，高度為100vh(左側(cè)為豎屏情況，右側(cè)為橫屏情況)

例如，在桌面端瀏覽器視口尺寸為650px，那么 1vw = 650 * 1% = 6.5px(這是理論推算的出，如果瀏覽器不支持0.5px，那么實際渲染結(jié)果可能是7px)。

兼容性

其兼容性如下圖所示，可以知道：在移動端 iOS 8 以上以及 Android 4.4 以上獲得支持，并且在微信 x5 內(nèi)核中也得到***的全面支持。

截圖來自Can I Use

截圖來自X5內(nèi)核-Can I Use

利用視口單位適配頁面

對于移動端開發(fā)來說，最為重要的一點是如何適配頁面，實現(xiàn)多終端的兼容，不同的適配方式各有千秋，也各有缺點。

就主流的響應(yīng)式布局、彈性布局來說，通過 Media Queries 實現(xiàn)的布局需要配置多個響應(yīng)斷點，而且?guī)淼捏w驗也對用戶十分的不友好：布局在響應(yīng)斷點范圍內(nèi)的分辨率下維持不變，而在響應(yīng)斷點切換的瞬間，布局帶來斷層式的切換變化，如同卡帶的唱機般“咔咔咔”地一下又一下。

而通過采用rem單位的動態(tài)計算的彈性布局，則是需要在頭部內(nèi)嵌一段腳本來進行監(jiān)聽分辨率的變化來動態(tài)改變根元素字體大小，使得 CSS 與 JS 耦合了在一起。

有沒有辦法能夠解決這樣的問題呢?

答案是肯定的，通過利用視口單位實現(xiàn)適配的頁面，是既能解決響應(yīng)式斷層問題，又能解決腳本依賴的問題的。

做法一：僅使用vw作為CSS單位

在僅使用 vw 單位作為唯一應(yīng)用的一種 CSS 單位的這種做法下，我們遵守：

1.對于設(shè)計稿的尺寸轉(zhuǎn)換為vw單位，我們使用Sass函數(shù)編譯

 
 
 
 
    
  
  
  
  
  1. //iPhone 6尺寸作為設(shè)計稿基準(zhǔn)
    2. 
  
  
  
  
  2. $vm_base: 375; 
    3. 
  
  
  
  
  3. @function vw($px) {
    4. 
  
  
  
  
  4.     @return ($px / 375) * 100vw;
    5. 
  
  
  
  
  5. }
    6.

2.無論是文本還是布局高寬、間距等都使用 vw 作為 CSS 單位

 
 
 
 
    
  
  
  
  
  1. .mod_nav {
    2. 
  
  
  
  
  2.     background-color: #fff;
    3. 
  
  
  
  
  3.     &_list {
    4. 
  
  
  
  
  4.         display: flex;
    5. 
  
  
  
  
  5.         padding: vm(15) vm(10) vm(10); // 內(nèi)間距
    6. 
  
  
  
  
  6.         &_item {
    7. 
  
  
  
  
  7.             flex: 1;
    8. 
  
  
  
  
  8.             text-align: center;
    9. 
  
  
  
  
  9.             font-size: vm(10); // 字體大小
    10. 
  
  
  
  
  10.             &_logo {
    11. 
  
  
  
  
  11.                 display: block;
    12. 
  
  
  
  
  12.                 margin: 0 auto;
    13. 
  
  
  
  
  13.                 width: vm(40); // 寬度
    14. 
  
  
  
  
  14.                 height: vm(40); // 高度
    15. 
  
  
  
  
  15.                 img {
    16. 
  
  
  
  
  16.                     display: block;
    17. 
  
  
  
  
  17.                     margin: 0 auto;
    18. 
  
  
  
  
  18.                     max-width: 100%;
    19. 
  
  
  
  
  19.                 }
    20. 
  
  
  
  
  20.             }
    21. 
  
  
  
  
  21.             &_name {
    22. 
  
  
  
  
  22.                 margin-top: vm(2);
    23. 
  
  
  
  
  23.             }
    24. 
  
  
  
  
  24.         }
    25. 
  
  
  
  
  25.     }
    26. 
  
  
  
  
  26. }
    27.

3.1物理像素線(也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情況)采用 transform 屬性 scale 實現(xiàn)。

 
 
 
 
    
  
  
  
  
  1. .mod_grid {
    2. 
  
  
  
  
  2.     position: relative;
    3. 
  
  
  
  
  3.     &::after {
    4. 
  
  
  
  
  4.         // 實現(xiàn)1物理像素的下邊框線
    5. 
  
  
  
  
  5.         content: '';
    6. 
  
  
  
  
  6.         position: absolute;
    7. 
  
  
  
  
  7.         z-index: 1;
    8. 
  
  
  
  
  8.         pointer-events: none;
    9. 
  
  
  
  
  9.         background-color: #ddd;
    10. 
  
  
  
  
  10.         height: 1px;
    11. 
  
  
  
  
  11.         left: 0;
    12. 
  
  
  
  
  12.         right: 0;
    13. 
  
  
  
  
  13.         top: 0;
    14. 
  
  
  
  
  14.         @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    15. 
  
  
  
  
  15.             -webkit-transform: scaleY(0.5);
    16. 
  
  
  
  
  16.             -webkit-transform-origin: 50% 0%;
    17. 
  
  
  
  
  17.         }
    18. 
  
  
  
  
  18.     }
    19. 
  
  
  
  
  19.     ...
    20. 
  
  
  
  
  20. }
    21.

4.對于需要保持高寬比的圖，應(yīng)改用 padding-top 實現(xiàn)

 
 
 
 
    
  
  
  
  
  1. .mod_banner {
    2. 
  
  
  
  
  2.     position: relative;
    3. 
  
  
  
  
  3.     padding-top: percentage(100/700); // 使用padding-top
    4. 
  
  
  
  
  4.     height: 0;
    5. 
  
  
  
  
  5.     overflow: hidden;
    6. 
  
  
  
  
  6.     img {
    7. 
  
  
  
  
  7.         width: 100%;
    8. 
  
  
  
  
  8.         height: auto;
    9. 
  
  
  
  
  9.         position: absolute;
    10. 
  
  
  
  
  10.         left: 0;
    11. 
  
  
  
  
  11.         top: 0; 
    12. 
  
  
  
  
  12.     }
    13. 
  
  
  
  
  13. }
    14.

由此，我們能夠?qū)崿F(xiàn)一個常見布局的頁面效果如下：

體驗地址點擊此處

做法二：搭配vw和rem，布局更優(yōu)化

這樣的頁面雖然看起來適配得很好，但是你會發(fā)現(xiàn)由于它是利用視口單位實現(xiàn)的布局，依賴于視口大小而自動縮放，無論視口過大還是過小，它也隨著視口過大或者過小，失去了***最小寬度的限制。

當(dāng)然，你可以不在乎這樣微小的不友好用戶體驗，但我們還是嘗試下追求修復(fù)這樣的小瑕疵吧。

于是，聯(lián)想到不如結(jié)合rem單位來實現(xiàn)布局?rem 彈性布局的核心在于動態(tài)改變根元素大小，那么我們可以通過：

  1. 給根元素大小設(shè)置隨著視口變化而變化的 vw 單位，這樣就可以實現(xiàn)動態(tài)改變其大小。
  2. 限制根元素字體大小的***最小值，配合 body 加上***寬度和最小寬度

這樣我們就能夠?qū)崿F(xiàn)對布局寬度的***最小限制。因此，根據(jù)以上條件，我們可以得出代碼實現(xiàn)如下：

 
 
 
 
    
  
  
  
  
  1. // rem 單位換算：定為 75px 只是方便運算，750px-75px、640-64px、1080px-108px，如此類推
    2. 
  
  
  
  
  2. $vm_fontsize: 75; // iPhone 6尺寸的根元素大小基準(zhǔn)值
    3. 
  
  
  
  
  3. @function rem($px) {
    4. 
  
  
  
  
  4.      @return ($px / $vm_fontsize ) * 1rem;
    5. 
  
  
  
  
  5. }
    6. 
  
  
  
  
  6. // 根元素大小使用 vw 單位
    7. 
  
  
  
  
  7. $vm_design: 750;
    8. 
  
  
  
  
  8. html {
    9. 
  
  
  
  
  9.     font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    10. 
  
  
  
  
  10.     // 同時，通過Media Queries 限制根元素***最小值
    11. 
  
  
  
  
  11.     @media screen and (max-width: 320px) {
    12. 
  
  
  
  
  12.         font-size: 64px;
    13. 
  
  
  
  
  13.     }
    14. 
  
  
  
  
  14.     @media screen and (min-width: 540px) {
    15. 
  
  
  
  
  15.         font-size: 108px;
    16. 
  
  
  
  
  16.     }
    17. 
  
  
  
  
  17. }
    18. 
  
  
  
  
  18. // body 也增加***最小寬度限制，避免默認(rèn)100%寬度的 block 元素跟隨 body 而過大過小
    19. 
  
  
  
  
  19. body {
    20. 
  
  
  
  
  20.     max-width: 540px;
    21. 
  
  
  
  
  21.     min-width: 320px;
    22. 
  
  
  
  
  22. }
    23.

這里就不再給出截圖，但你可以點擊此處在線地址進行體驗。

小結(jié)

相對于做法一，個人比較推崇做法二，有以下兩點原因：

***，做法二相對來說用戶視覺體驗更好，增加了***最小寬度的限制;

第二，更重要是，如果選擇主流的rem彈性布局方式作為項目開發(fā)的適配頁面方法，那么做法二更適合于后期項目從 rem 單位過渡到 vw 單位。只需要通過改變根元素大小的計算方式，你就可以不需要其他任何的處理，就無縫過渡到另一種CSS單位，更何況vw單位的使用必然會成為一種更好適配方式，目前它只是礙于兼容性的支持而得不到廣泛的應(yīng)用。


分享名稱：利用視口單位實現(xiàn)適配布局
網(wǎng)站URL：http://www.5511xx.com/article/djpicpd.html