移動 web 端屏幕適配 - rem

Sanchi 發布于2019-08-30 15:53 / 2579人閱讀

摘要：前言最近整理了一下以前學習前端的筆記，發現自己對移動端屏幕適配這一塊并沒有真正理解，只是會用。接下來，把自己的一些對移動端屏幕適配的思考記錄下來。量得的高度為，因為在設計稿這樣尺寸的屏幕中，，所以該的的值為，即。

前言

最近整理了一下以前學習前端的筆記，發現自己對移動 web 端屏幕適配（rem）這一塊并沒有真正理解，只是會用。
接下來，把自己的一些對移動 web 端屏幕適配（rem）的思考記錄下來。

rem 介紹

rem 表示根元素（）的 font-size 的大小。即如果根元素的 font-size 大小為 14px，則 1rem = 14px

rem 適配移動 web 端 適配效果

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

代碼

// 在 html 文件的 head 標簽中

// 在 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。

云服務器 GPU云服務器移動端適配移動端適配方案移動端適配 js 移動端web

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

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

移動 web 端屏幕適配 - rem

摘要：前言最近整理了一下以前學習前端的筆記，發現自己對移動端屏幕適配這一塊并沒有真正理解，只是會用。接下來，把自己的一些對移動端屏幕適配的思考記錄下來。量得的高度為，因為在設計稿這樣尺寸的屏幕中，，所以該的的值為，即。前言最近整理了一下以前學習前端的筆記，發現自己對移動 web 端屏幕適配（rem）這一塊并沒有真正理解，只是會用。接下來，把自己的一些對移動 web 端屏幕適配（rem）的...

Xufc 2019-08-22 18:15 評論0 收藏0
移動 web 端屏幕適配 - rem

摘要：前言最近整理了一下以前學習前端的筆記，發現自己對移動端屏幕適配這一塊并沒有真正理解，只是會用。接下來，把自己的一些對移動端屏幕適配的思考記錄下來。量得的高度為，因為在設計稿這樣尺寸的屏幕中，，所以該的的值為，即。前言最近整理了一下以前學習前端的筆記，發現自己對移動 web 端屏幕適配（rem）這一塊并沒有真正理解，只是會用。接下來，把自己的一些對移動 web 端屏幕適配（rem）的...

RdouTyping 2019-08-02 10:45 評論0 收藏0
從零搭建移動H5開發項目實戰

摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。從零搭建移動H5開發項目實戰前端H5的前世今身在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...

terro 2019-08-29 11:32 評論0 收藏0
從零搭建移動H5開發項目實戰

摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。從零搭建移動H5開發項目實戰前端H5的前世今身在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...

pepperwang 2019-08-20 12:14 評論0 收藏0