前端--小程序的学习（三）

今天呢，我们一起来看看小程序的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。。。

更多专业前端知识，请上 【猿2048】www.mk2048.com