zoukankan      html  css  js  c++  java
  • 微信小程序-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物理像素。

    rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。

    建议: 开发微信小程序时设计师可以用 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" />

    选择器

    目前支持的选择器有:

    全局样式与局部样式

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

  • 相关阅读:
    Lily.Core.FileDataProvider文件管理使用范例。
    CruiseControl.NET,Nant持续集成(1)
    如何为当前进程设置环境变量?
    unix时间戳与datetime的转换函数
    Mac 平台下功能强大的Shimo软件使用指南
    如何解决源码包安装时的依赖性问题
    《Linux企业应用案例精解》一书配套视频发布
    ZoneMinder配置与使用
    网站优化IIS7下静态文件的优化
    WIN7常用功能的介绍
  • 原文地址:https://www.cnblogs.com/wqsbk/p/6094037.html
Copyright © 2011-2022 走看看