小程序跳转样式布局错乱_小程序 wxss 样式毁三观

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