36

2018-09-05 10:28:47 +08:00

如果是 web，一般都先寫 css reset，然后開始寫頁(yè)面 css，時(shí)間長(zhǎng)了，忘記了 css reset 的存在，會(huì)感覺是瀏覽器默認(rèn)的。

剛寫小程序時(shí)候，會(huì)有點(diǎn)不習(xí)慣，然后也加上了 reset，立馬會(huì)感覺舒服很多。

目前小程序 wxss，除了 wxml 里面不能直接寫(只能 style 屬性寫)有點(diǎn)不方便(比如有一個(gè)全局顏色值通過(guò)變量傳遞的情況)，除了選擇器支持的不全(但目前也足夠用)，還有一些屬性不支持(比如 justify-content: space-evenly;)，其他還是和正常些網(wǎng)頁(yè) css 沒(méi)差異。

加上 rpx 單位很好用，iPhone 6 下面 ok 的話，其他分辨率手機(jī)上幾乎是等比縮放，小程序還分好了全局 app.wxss 頁(yè)面 page.wxss 至少我現(xiàn)在都不用 less、sass 了。

目前我唯一遇到的一個(gè)問(wèn)題，沒(méi)有特別好的解決方案的，那就是遮罩層里面需要上下滾動(dòng)的時(shí)候，冒泡問(wèn)題，雖然彈框后可以設(shè)置頁(yè)面 overflow: hidden 或者 catchtouchmove 之后自己模擬 touchmove 但感覺不夠完美。

下面是我小程序里面使用的 reset，目前感覺夠用。

page, view, input, text, form, navigator, rich-text, picker, scroll-view, cover-view, open-data { box-sizing: border-box; }

rich-text, open-data, form { display: block; }

del { color: #999; text-decoration: line-through; }

image { display: block; }

cover-view { line-height: 1.5; white-space: normal; }

page { font-size: 28rpx; font-weight: 300; line-height: 1.5; color: #404040; background: #f8f8f8; }

/* 隱藏默認(rèn)滾動(dòng)條 */

::-webkit-scrollbar {

width: 0;

height: 0;

color: transparent;

}

最后的建議：float 這種幾乎不會(huì)用到了。可以盡情的使用 flex

總結(jié)

以上是生活随笔為你收集整理的小程序跳转样式布局错乱_小程序 wxss 样式毁三观的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。