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

  1. 第一天：人生若只如初見(jiàn)；
  2. 第二天：你可能要拋棄原來(lái)的響應(yīng)式開(kāi)發(fā)思維

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

rem的重定義

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

wxss中的rem與css中的rem的含義完全不同，下面是微信官方文檔中對(duì)rem的定義：

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

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

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

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

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

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