移動端布局（less+rem）

lk20150415 發布于2019-08-29 14:14 / 2445人閱讀

摘要：這里只是粘貼了一部分寬度高度行高背景尺寸背景尺寸，設置寬度，高度將的屏幕分成分，所以就除了，用函數來添加單位這里是相對的屏幕的，相信大部分公司移動端的設計圖都是根據設計的。

html

??在html使用了網上阿里的函數來計算根元素的字體(當然可以寫在其他地方，只要生效就可以)

xxx

??這里主要使用了函數計算根元素字體，將屏幕分成了10分，在iphone6下面根元素字體就是37.5px；

less函數

??這是使用了less的unit函數來添加單位，將所有的需要轉化的css都寫到一個公共的less文件里面，通過@import導入進去。(這里只是粘貼了一部分)

.fs(@px) {
  font-size: unit(@px / 37.5, rem);
}

/*----- 寬度 -----*/
.w(@px) {
  width: unit(@px / 37.5, rem);
}

/*----- 高度 -----*/
.h(@px) {
  height: unit(@px / 37.5, rem);
}

/*----- 行高 -----*/
.lh(@px) {
  line-height: unit(@px / 37.5, rem);
}

/*----- 背景尺寸 -----*/
.b_s(@px, @px) {
  -webkit-background-size: unit(@px / 37.5, rem) unit(@px / 37.5, rem);
  background-size: unit(@px / 37.5, rem) unit(@px / 37.5, rem);
}
/**
* [背景尺寸，設置寬度，高度auto]
 */
.b_s1(@px) {
  -webkit-background-size: unit(@px / 37.5, rem) auto;
  background-size: unit(@px / 37.5, rem) auto;
}

.b_s2(@px) {
  -webkit-background-size: auto unit(@px / 37.5, rem);
  background-size: auto unit(@px / 37.5, rem);
}

/*----- margin -----*/
.mt(@px) {
  margin-top: unit(@px / 37.5, rem);
}
.mr(@px) {
  margin-right: unit(@px / 37.5, rem);
}
.mb(@px) {
  margin-bottom: unit(@px / 37.5, rem);
}
.ml(@px) {
  margin-left: unit(@px / 37.5, rem);
}

??將iphone6的屏幕分成10分，所以就除了37.5，用unit函數來添加單位（這里是相對iphone6的屏幕的，相信大部分公司移動端的設計圖都是根據iphone6設計的）。

在其他less文件里面使用

@import "../less/bass.less";
.sort-title {
  .fs(17);
  color: @color0;
  font-family: PingFang-SC-Medium;
  .mt(20);
  .mb(15);
}

?? .fs, .mt這些就是less的函數，最終編譯好的文件就是rem了。（總之，在iphon6或者iphone7，屏幕是376px，無論你上面怎么分配比例，在chrome里面審查你編譯后的css，鼠標放到元素上會顯示大小，這時和你設計圖上的大小相等就可以。）

總結

??本人感覺這樣還是比較方便的，不用像那樣設置根元素100px，然后根據sublime的插件來計算，或者更復雜的計算等等。我們項目使用angular4，angular4可以自動編譯less,只需向上面那樣直接調用函數就可以，而且可以做一些運算，還是比較方便的，當然vue里面你只要安裝less插件，就可以讓vue-cli來編譯了，如果這些你都沒用，你還可以通過Koala來編譯成css，通過link來引入。

云服務器 GPU云服務器移動端布局 web移動端布局 rem布局移動端

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

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

移動端(手機端)頁面自適應解決方案—rem布局篇

摘要：移動端手機端頁面自適應解決方案布局假設設計妹妹給我們的設計稿尺寸為。移動端(手機端)頁面自適應解決方案—rem布局假設設計妹妹給我們的設計稿尺寸為750 * 1340。結合網易、淘寶移動端首頁html元素上的動態font-size屬性、設計稿尺寸、前端與設計之間協作流程一般分為下面兩種：一、網易做法：引入：頁面開頭處引入下面這段代碼，用于動態計算font-size (funct...

dinfer 2019-08-29 13:56 評論0 收藏0
移動端(手機端)頁面自適應解決方案—rem布局篇

摘要：移動端手機端頁面自適應解決方案布局假設設計妹妹給我們的設計稿尺寸為。移動端(手機端)頁面自適應解決方案—rem布局假設設計妹妹給我們的設計稿尺寸為750 * 1340。結合網易、淘寶移動端首頁html元素上的動態font-size屬性、設計稿尺寸、前端與設計之間協作流程一般分為下面兩種：一、網易做法：引入：頁面開頭處引入下面這段代碼，用于動態計算font-size (funct...

1fe1se 2019-08-21 17:51 評論0 收藏0
移動端適配方案

摘要：業務環境是決定整體項目的適配方案的核心因素。而淘寶的主站和類似，分為移動端頁面和端頁面，端頁面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時候將注意力集中在中間區域。移動端適配方案移動端適配方案是一個老生常談的話題，但是對于不同的項目、不同的業務場景可能會需要不同的適配方案來進行移動端適配，向下兼容的baseline也需要提前訂好。整體寬高其實移動端適配就和下面的玩具一樣，...

feng409 2019-08-30 15:54 評論0 收藏0
Next框架與主流工具的整合（二）—— 完善與優化

摘要：從概念來說，就是設備的物理像素與設備獨立像素也就是邏輯像素，以下就稱為邏輯像素的比率。通過這個標簽，我們可以實現初始縮放，就可以達到的邏輯像素眼睛在設備上看起來的，換句話說可以在上充滿豎屏的整個寬度。前言：18年12月24日項目成功上線了，在經歷了兩周的線上bug、UI以及代碼優化后，解決了不少問題，于是再完善與優化一下這個項目。布局優化高清配置 antd-mobile 自定義...

teren 2019-08-23 14:49 評論0 收藏0