今天呢,我们一起来看看小程序的wxss,其实呢就跟前端写css大体一样的,但是还有一些小的差别。
比如
HTML5 VS 微信小程序
div(标签选择器) view、text、icon、input、image、navigator(标签选择器)
class(类选择器) class
id(id选择器)(效率最高) id(效率最高)
element,element(层级选择器) element,element(层级选择器)
:after(伪类选择器) :after :before
:frist-child等 :frist-child等(不建议(工具过滤易导致页面错乱))
.class .class .class .class(不建议(工具过滤易导致页面错乱))
群组选择器 群组选择器
后代选择器 后代选择器
我们用html5写自适应的话需要用到百分比或是函数计算比例,但小程序可以让我们避免了这个麻烦,我们可以用rpx,在ipoone6的开发环境下,1rpx=0.5px;我们采用这个单位就可以在完成后,省掉兼容的一部分问题了。(当然我这里面没有考虑到)
这里有个开发中可能遇到的坑,由于背景图是全覆盖的,所以这里可以在wxss文件中添加语句:.indexBox{height:100%;} page{height:100%} 都需要设置,要不然没法自适应,注意大小写。
图片引用
wxss不能直接通过css3中的background-image属性来设置显示的背景图片,例如我在wxss中书写如下background-image: url(imageB.png);
控制台打印:pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签。
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
小程序中可以直接给placeholder添加样式,比如:placeholder-style="color:#ccc;"
以上均为个人观点,欢迎指正O(∩_∩)O,下一节讲一下小程序的js。。。