亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

移動(dòng)端布局（less+rem）

lk20150415 / 2503人閱讀

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

html

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




  
  
  
  xxx

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

less函數(shù)

??這是使用了less的unit函數(shù)來(lái)添加單位，將所有的需要轉(zhuǎn)化的css都寫到一個(gè)公共的less文件里面，通過(guò)@import導(dǎo)入進(jìn)去。(這里只是粘貼了一部分)

.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ù)來(lái)添加單位（這里是相對(duì)iphone6的屏幕的，相信大部分公司移動(dòng)端的設(shè)計(jì)圖都是根據(jù)iphone6設(shè)計(jì)的）。

在其他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，無(wú)論你上面怎么分配比例，在chrome里面審查你編譯后的css，鼠標(biāo)放到元素上會(huì)顯示大小，這時(shí)和你設(shè)計(jì)圖上的大小相等就可以。）

總結(jié)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113004.html

相關(guān)文章

  • 移動(dòng)端(手機(jī)端)頁(yè)面自適應(yīng)解決方案—rem布局篇

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

    dinfer 評(píng)論0 收藏0

  • 移動(dòng)端(手機(jī)端)頁(yè)面自適應(yīng)解決方案—rem布局篇

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

    1fe1se 評(píng)論0 收藏0

  • 移動(dòng)端適配方案

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

    feng409 評(píng)論0 收藏0

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

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

    teren 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<