挪動 web 端屏幕適配 - rem

2023年10月19日 199次阅读 来源: hileix

媒介

近來整理了一下之前進修前端的筆記，發明本身對挪動 web 端屏幕適配（rem）這一塊並沒有真正明白，只是會用。
接下來，把本身的一些對挪動 web 端屏幕適配（rem）的思索記錄下來。

rem 引見

rem 示意根元素（<html>）的 font-size 的大小。即假如根元素的 font-size 大小為 14px，則 1rem = 14px

rem 適配挪動 web 端

適配結果

在差別尺寸的屏幕下，同一個元素的大小看起來不是一樣大的，然則它們所佔屏幕寬度的比例是一樣的。

代碼

// 在 html 文件的 head 標籤中
<script type="text/javascript">
  (function(){
    var html = document.documentElement;
    // 獵取屏幕寬度（px）
    var hWidth = html.getBoundingClientRect().width;
    // 設置 html 標籤的 font-size 大小為 hWidth/15
    html.style.fontSize = hWidth/15 + 'px';
  })()
</script>

// 在 less 中
/* 定義變量@r：750/15 */
@r:50rem; 
div {
  width: 100/@r;
  height: 200/@r;
}

javascript 代碼

起首，我們將屏幕的 1/15 大小（px）複製給 html 標籤的 font-size 屬性。此時，在任何尺寸的屏幕上，屏幕尺寸（px）的 1/15 px 都即是 1rem 的大小。即：在任何尺寸的屏幕上，只要給元素設置值雷同的 rem，則在一切尺寸的屏幕上該元素所佔屏幕寬度的比例是一樣的，所佔比例一樣，就適配了一切尺寸的屏幕。

less 代碼

如今只需要將設想稿中元素的 px 單元轉換為 rem 單元。

所以，這個時刻，我們能夠把設想稿也當做一個具有肯定尺寸的手機屏幕。
在我這個例子中，設想稿的寬度為 750px。

所以，750/15 = 50px，即在設想稿如許尺寸的手機屏幕中，1rem = 50px。

然後，在 less 代碼中，我們定義一個變量 @r。
量得 div 的寬度為 100px，由於在設想稿如許尺寸的屏幕中，1rem = 50px，所以該 div 的 rem 的值為：100/50 rem，即 100/@r。
量得 div 的高度為 200px，由於在設想稿如許尺寸的屏幕中，1rem = 50px，所以該 div 的 rem 的值為：200/50 rem，即 200/@r。

    原文作者：hileix
    原文地址: https://segmentfault.com/a/1190000015372376
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞