微信小程序开发之wxss学习中的六个问题
2018-01-26 14:01
661 查看
微信小程序开发之wxss学习中的六个问题
01 wxss
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比,WXSS 扩展的特性有:
尺寸单位
样式导入
02 尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px =
1物理像素。
建议:微信小程序开发过程中建议以iphone6为标准
03 样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。代码:
<!--pages/test/test.wxml--> <!--九九乘法表 --> <view class='con'> <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i"> <view style='display:inline-block;width:35px' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j"> <view wx:if="{{j<=i}}"> {{i}}*{{j}}={{i*j}} </view> </view> </view> </view>
/* pages/test/test.wxss */ @import "c.wxss"; .con{ font-size: 8px }
/* 这是c.wxss */ .con{ color: red }
运行结果:
心得:
@import必须是第一句,不然没有效果
04 内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style
中,以免影响渲染速度
<view style="color:{{color}};" />
class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。
<view class="normal_view" />
05 选择器
目前支持的选择器:06 全局样式与局部样式
全局样式定义在app.wxss 中,作用在每一个页面中。在 page 的 wxss 文件中定义的样式为局部样式,作用在对应的页面中。
局部样式覆盖全局样式。
-END-
相关文章推荐
- 微信开发学习 问题1: 网页授权问题 “该连接无法访问” 解决方法
- 微信开发学习日记(五):weiphp开源框架的bug,公众号权限编辑问题
- 微信小程序开发教程,大多数人都搞错的八个问题
- 微信小程序开发常见问题分析
- 程序开发中的(小数)精度缺失问题--学习记录
- java学习之旅15、16--eclipse开发环境的使用_建立java项目_运行java项目,eclipse运行程序的问题(src和bin问题)_debug模式
- 微信小程序开发之真机测试 地图定位 map API 无法获取当前位置的问题
- 如何入门微信小程序开发,有哪些学习资料?
- 微信小程序学习(2)_开发准备和开发工具简介
- 微信小程序开发之不能使用eval函数的问题 推荐
- 近期的一些学习--当一个程序开发到了中期,突然出现性能问题,如何解决
- 微信小程序学习(3)-开发工具菜单介绍
- 微信小程序学习:audio组件发现的几个问题
- 微信小程序开发过程中遇到的问题
- Android开发学习解决程序运行就出错的一个问题
- 微信小程序开发常见问题分析
- 学习笔记之ArcgisEngine 开发 10.1程序运行在10.0平台上的兼容问题解决
- 小程序开发遇到问题如何联系微信官方