rem兩三事

Alliot 發布于2019-08-29 18:41 / 524人閱讀

摘要：昨天被問到關于的問題，當時一臉懵逼，因為寫了兩年，基本沒怎么碰過，有點迷糊。缺點無縮放，且針對的屏沒有做適配，導致對一些手機的適配不是很到位。缺點需要根據設計稿進行基準值換算，在不使用編輯器插件開發時，單位計算復雜。

os：昨天被問到關于rem的問題，當時一臉懵逼，因為寫了兩年js，基本沒怎么碰過css，有點迷糊。

px、em、rem區別

不同于px這個固定單位，em和rem都是相對單位，em是相對父元素的font-size，層級越深，em的換算越復雜，rem，即root-em，相對于根html的font-size。做響應式頁面，使用rem較好，在不同瀏覽器間的兼容性也好。

rem適配移動端方案

- 方案一：

html{font-size:16px !default;}
box1的寬度 = 設計稿上box1顯示的寬度/(設計稿寬度640/屏幕寬度320)/font-size；

很多文章都會說16算起來較麻煩，所以設定html{font-size:62.5%}，這樣根字體大小就是10px了，算起來較方便，公式還是上面的公式。
然后根據不同的媒體查詢設置font-size的值（百分比）。

@media screen and (max-width:1440px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait){ 
    html { font-size: 281.5%; }
}
@media screen and (max-width:1080px) and (-webkit-min-device-pixel-ratio:1.5){ 
    html { font-size: 210.9%; }
}
// ...
@media screen and (max-width:320px) and (-webkit-min-device-pixel-ratio:1.5){ 
    html { font-size: 62.5%; }
}

優點：較為普遍性，換算也簡單；
缺點：通過媒體查詢需要適配多個設備，有些設備不在范圍內就不能很好的適配。

- 方案二：（網易方案）

手機端：基準值為100，拿到設計稿除以100，即為body的width，入設計稿640，那就以iphone5為例，body{width：6.4rem}；

document.documentElement.style.fontSize = document.documentElement.clientWidth/6.4 + "px";

因為根fontsize隨著屏幕寬度變化，所以不用媒體查詢適配，box1{width:設計圖box1寬度/基準值100}；

優點：通過動態根font-size來做適配，基本無兼容性問題，適配較為精準，換算簡便。
缺點：無viewport縮放，且針對iPhone的Retina屏沒有做適配，導致對一些手機的適配不是很到位。

- 方案三（淘寶flexible）

大漠：使用Flexible實現手淘H5頁面的終端適配

1.引入flexible

2.基準值 = 設計圖寬度/10；例如設計圖是750px，基準值就是75；
box1的寬度 = 設計圖box1寬度/基準值；例如設計圖上box1為150px，則為2rem；其實意思就是把整個設計圖寬度設置為10rem。

優點：通過動態根font-size、viewpor、dpr來做適配，無兼容性問題，適配精準。
缺點：需要根據設計稿進行基準值換算，在不使用sublime text編輯器插件開發時，單位計算復雜。

rem換算

我現在做的項目，對rem的換算用的是sass的函數，是通過方案一的媒體查詢來做的：

@function rem($px, $font-size){
  //$px為需要轉換的字號，$font-size為根字體大小
  @return $px / ($font-size/($font-size*0+1)) * 1rem;
}
.box1{width: rem(100);}

關于每種方案的優勢和劣勢，借鑒于有你便是晴天，感謝大神分享。

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

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

Vue 多系統切換實現方案(iframe嵌套的兩三事)

摘要：總結來說，低效，所以現在想將幾個系統融合到一個里邊，并且每次切換系統的時候保留用戶的操作。我是用開發的，所以切換的地方直接用了的切換組件。前言公司分好幾個后臺模塊，統一使用vue+elementUi框架開發，每一個后臺模塊都是單獨團隊開發的。并且幾個系統整體的風格、布局一樣的，包括左側邊欄，上方的面包屑等用戶在使用的時候，可能要切換別的系統就要在瀏覽器里，新打開窗口，再輸入網址，回...

cocopeak 2019-08-26 11:58 評論0 收藏0
PostgreSQL兩三事

摘要：在沒有手動配置的情況下，之類的事情，不得不交給做，而與賬戶之間的來回切換，也會浪費寶貴的時間。作為秒數表示空閑時間間隔，當一個連接持續該時間閑置，會發送包給客戶端，若連續個包都在秒內沒有回應，則會認為這個已死。不要用Graphic Installer 至少在Ubuntu下，覺得原生的apt-get管理方式更合適，PG的文件資源會被分配到應該的地方，Linux的系統文件結構也是種非常穩...

leeon 2019-07-25 12:31 評論0 收藏0
outline和他娘親border兩三事

摘要：是啥顧英文名思義就是元素的輪廓，其實一般我們很少去設置元素的樣式，因此很多人對他不太了解。瀏覽器默認給很多特定元素的某些行為加上了樣式，比如標簽輸入框等。 outline是啥？ outline顧英文名思義就是元素的輪廓，其實一般我們很少去設置元素的outline樣式，因此很多人對他不太了解。瀏覽器默認給很多特定元素的某些行為加上了outline樣式，比如a標簽、input輸入框等。當你...

DesGemini 2019-08-29 17:11 評論0 收藏0
react+redux+webpack移動端項目總結

摘要：前言距離我進新公司也有一個多月，這一個月的事件使用寫了一個項目，期間斷斷續續重構了兩三次，目前已經完成第一階段測試，也總結分享一些使用的一些坑。因為他的不可變特點，我們不會在不經意見不小心改變了，而引起不必要的問題。前言距離我進新公司也有一個多月，這一個月的事件使用react寫了一個項目，期間斷斷續續重構了兩三次，目前已經完成第一階段測試，也總結分享一些使用react的一些坑。 s...

garfileo 2019-08-22 10:42 評論0 收藏0