36

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

如果是 web，一般都先寫 css reset，然后開始寫頁面 css，時間長了，忘記了 css reset 的存在，會感覺是瀏覽器默認的。

剛寫小程序時候，會有點不習慣，然后也加上了 reset，立馬會感覺舒服很多。

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

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

目前我唯一遇到的一個問題，沒有特別好的解決方案的，那就是遮罩層里面需要上下滾動的時候，冒泡問題，雖然彈框后可以設置頁面 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; }

/* 隱藏默認滾動條 */

::-webkit-scrollbar {

width: 0;

height: 0;

color: transparent;

}

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。