好程式設計師web前端培訓分享之HTMLCSS學習筆記媒體查詢+ rem用法

好程式設計師發表於2020-05-11
原文網址 : http://blog.itpub.net/69913864/viewspace-2691285/
程式設計師Web前端HTMLCSS筆記REM

好程式設計師 web 前端培訓分享之 HTMLCSS 學習筆記媒體查詢 + rem 用法

計算方法

計算rem方法：
結合媒體查詢 -> 隨著裝置的改變 更改html font-size的值。

媒體查詢確定範圍？？

移動端設計圖 ： 640px 750px 1080px;
dpr 2 2 3
範圍 320px 375px

@ media   screen   and   ( max-width :320px ) {

     html {

         font-size : 12 px ;

     }}@ media   screen   and   ( min-width :321px )   and   ( max-width :375px ) {

     html {

         font-size : 14 px ;

     }}@ media   screen   and   ( min-width :376px ) {

     html {

         font-size : 16 px ;

     }}

實現流程

ui設計圖   640px

dpr    2

ps量出height   88px;

88px / 2 ==  44px;

設計圖640px    dpr  2

640px  /  2 == 320px

44px / 12px == rem

 

vw + rem

為了方便計算，可以把html的font-size值 設定成100px; 1rem == 100px;
100px是一個固定值，沒辦法隨著裝置的改變而改變。
能跟隨裝置發生改變  
vw 根據視口大小進行改變。
100px == ?vw

根據設計圖分配情況

·  第一種情況：
如果UI設計圖為 640px 
考慮的dpr 2
適配的核心裝置 320px;

100vw == 320px
1vw == 3.2px
?vw == 100px
31.25vw == 100px

·  第二種情況
如果設計圖為750px
考慮dpr 2
適配的核心裝置 375px
100vw == 375px
1vw == 3.75px
?vw == 100px
26.67vw == 100px;

設定方法

如果設計圖為 640px html設定{font-size:31.25vw}
如果設計圖為 750px html設定{font-size:26.67vw}

計算流程

vw 結合 rem 計算流程
因為設計圖 640px
所以html設定{font-size:31.25vw;}
ps中獲取height 88px
dpr 2
88 / 2 == 44px
44 / 100 == 0.44rem;

 

flxible.js 外掛

計算流程

1：引入flxible.js外掛
<script src=""></script>
2: 去掉html裡面預設的meta標籤
<meta name="viewport" content="width=device-width, initial-scale=1.0">

flxible.js原理

在頁面中引入flexible.js後，flexible會在<html>標籤上增加一個data-dpr屬性和font-size樣式（如下圖）。
為了方便計算可以設定成100px;

 

//js首先會獲取裝置型號，然後根據不同裝置新增不同的data-dpr值，比如說1、2或者3，從原始碼中我們可以看到。 if   ( ! dpr   &&   ! scale)   {

     var   isAndroid   =   win.navigator.appVersion.match( /android/gi );

     var   isIPhone   =   win.navigator.appVersion.match( /iphone/gi );

     var   devicePixelRatio   =   win.devicePixelRatio;

     if   (isIPhone)   {

         // iOS下，對於2和3的屏，用2倍的方案，其餘的用1倍方案          if   (devicePixelRatio   >=   3   &&   ( ! dpr   ||   dpr   >=   3 ))   {

             dpr   =   3 ;

         }   else   if   (devicePixelRatio   >=   2   &&   ( ! dpr   ||   dpr   >=   2 ))   {

             dpr   =   2 ;

         }   else   {

             dpr   =   1 ;

         }

     }   else   {

         // 其他裝置下，仍舊使用1倍的方案          dpr   =   1 ;

     }

     scale   =   1   /   dpr;}

頁面中的元素用rem單位來設定，rem就是相對於根元素<html>的font-size來計算的，flexible.js能根據<html>的font-size計算出元素的盒模型大小。這樣就意味著我們只需要在根元素確定一個px字號，因此來算出各元素的寬高，從而實現螢幕的適配效果

把視覺稿中的px轉換成rem

工作中我們常見的視覺稿大小大至可為640、750、1125三種。不過flexible.js並沒有限制只能用這三種，所以你還可以根據自身情況來調整，具體如何轉換，我們以視覺稿為640px的寬來舉例子，把640px分為100份，每一份稱為一個單位a，那麼每個a就是6.4px，而1rem單位被認定為10a，此時，1rem=1(a)X10X6.4(px)即64px。

640px/100=6.4px                              1個單位a為6.4px

1rem = 10a                                   1rem單位被認定為10a

1rem = 1(a)*10*6.4(px) = 64px

 


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69913864/viewspace-2691285/，如需轉載，請註明出處，否則將追究法律責任。

相關文章