• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

家庭记账本之微信小程序(六) - 一念永恒s

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

家庭记账本之微信小程序(六)

2019-02-26 13:03  一念永恒s  阅读(292)  评论(0编辑  收藏  举报

Wxss的学习

 

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式。

WXSS用来决定WXML的组件应该怎么显示。

为了适应广大的前端开发者,我们的WXSS具有CSS大部分特性。同时为了更适合开发微信小程序,我们对CSS进行了扩充以及修改。

css相比我们扩展的特性有:

· 尺寸单位

· 样式导入

尺寸单位

· rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

设备

rpx换算px (屏幕宽度/750)

px换算rpx (750/屏幕宽度)

iPhone5

1rpx = 0.42px

1px = 2.34rpx

iPhone6

1rpx = 0.5px

1px = 2rpx

iPhone6 Plus

1rpx = 0.552px

1px = 1.81rpx

建议:开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。

注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。

样式导入

使用@import语句可以导入外联样式表,@import跟需要导入的外联样式表的相对路径,用;表示语句结束。

示例代码:

/** common.wxss **/.small-p{

  padding:5px;

}

/** app.wxss **/@import "common.wxss";.middle-p {

  padding:15px;

}

内联样式

框架组件上支持使用style、class属性来控制组件的样式。

· style:静态的样式统一写到class中。style接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进style中,以免影响渲染速度。

<view style="color:{{color}};" />

· class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

<view class="normal_view" />

选择器

目前支持的选择器有:

选择器

样例

样例描述

.class

.intro

选择所有拥有class="intro"的组件

#id

#firstname

选择拥有id="firstname"的组件

element

view

选择所有view组件

element, element

view checkbox

选择所有文档的view组件和所有的checkbox组件

::after

view::after

在view组件后边插入内容

::before

view::before

在view组件前边插入内容

全局样式与局部样式

定义在app.wxss中的样式为全局样式,作用于每一个页面。在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器。

以上就是wxss的部分内容。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
浅谈微信小程序生命周期发布时间:2022-07-18
下一篇:
ClassFinder小程序。。。搜索class在哪个jar包里面发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap