成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動端布局（less+rem）

lk20150415 / 2456人閱讀

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

html

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




  
  
  
  xxx

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

less函數(shù)

??這是使用了less的unit函數(shù)來添加單位，將所有的需要轉(zhuǎn)化的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);
}
/**
* [背景尺寸，設(shè)置寬度，高度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函數(shù)來添加單位（這里是相對iphone6的屏幕的，相信大部分公司移動端的設(shè)計圖都是根據(jù)iphone6設(shè)計的）。

在其他less文件里面使用 
@import "../less/bass.less";
.sort-title {
  .fs(17);
  color: @color0;
  font-family: PingFang-SC-Medium;
  .mt(20);
  .mb(15);
}

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

總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113004.html

相關(guān)文章

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

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

    dinfer 評論0 收藏0

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

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

    1fe1se 評論0 收藏0

  • 移動端適配方案

    摘要：業(yè)務(wù)環(huán)境是決定整體項目的適配方案的核心因素。而淘寶的主站和類似，分為移動端頁面和端頁面，端頁面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時候?qū)⒆⒁饬性谥虚g區(qū)域。 移動端適配方案 移動端適配方案是一個老生常談的話題，但是對于不同的項目、不同的業(yè)務(wù)場景可能會需要不同的適配方案來進行移動端適配，向下兼容的baseline也需要提前訂好。 整體寬高 其實移動端適配就和下面的玩具一樣，...

    feng409 評論0 收藏0

  • Next框架與主流工具的整合（二）—— 完善與優(yōu)化

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

    teren 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<