《微信小程序七日談》系列文章:

  1. 第一天:人生若只如初見;
  2. 第二天:你可能要拋棄原來的響應(yīng)式開發(fā)思維

上篇文章第一天:人生若只如初見簡單記錄了筆者初步上手開發(fā)微信小程序遇到的一些問題,其中提到了wxss的部分細(xì)節(jié)問題。這篇文章以筆者在開發(fā)小程序響應(yīng)式UI當(dāng)中遇到的一些問題為例,簡單記錄一下使用wxss為響應(yīng)式開發(fā)帶來的一些模式和思維上的改變。

rem的重定義

前端工程師對rem非常熟悉,rem是以html元素的font-size為基準(zhǔn)的尺寸計(jì)量單位。rem方便了開發(fā)者對響應(yīng)式UI的尺寸進(jìn)行統(tǒng)籌管理。

wxss中的rem與css中的rem的含義完全不同,下面是微信官方文檔中對rem的定義:

rem(root em): 規(guī)定屏幕寬度為20rem;1rem = (750/20)rpx

其中的750這個(gè)數(shù)值是wxss將設(shè)備屏幕的寬統(tǒng)一定義為750rpx,對此,下文會(huì)講解。

各位讀到這里是否腦海里浮現(xiàn)了一個(gè)想法:wxss的rem怎么聽起來有點(diǎn)像bootstrap的柵格系統(tǒng)呢?

wxss將屏幕寬分為20rem,bootstrap將設(shè)備屏幕寬度分為12列。初看起來確實(shí)有點(diǎn)類似。但其實(shí)wxss的rem和bootstrap的柵格系統(tǒng)并不相同。雖然wxss和bootstrap都是講屏幕尺寸分割為單元格,但rem和柵格的定位不同。

bootstrap的開發(fā)者使用指定的classname進(jìn)行元素間的比例分配,這其實(shí)接近為css3中的flexbox;而wxss的rem是一個(gè)尺寸單位,你可以在合理的場景下將任何以px為單位的屬性值替換為rem。

所以,開發(fā)小程序UI時(shí),需要拋棄思維中對rem的常規(guī)認(rèn)知。截

網(wǎng)友評論