微信小程序前端样式WXSS书写_冘醉_前端开发者

微信小程序前端样式WXSS书写

一. WXSS的简单介绍

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

css 相比,WXSS 扩展的特性有:

  • 尺寸单位
  • 样式导入
  • 尺寸单位
  • 样式导入
  • 二. 尺寸单位

    • rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
  • 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
    设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) 设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) 设备 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 iPhone5 1rpx = 0.42px 1px = 2.34rpx iPhone5 1rpx = 0.42px 1px = 2.34rpx iPhone6 1rpx = 0.5px 1px = 2rpx iPhone6 1rpx = 0.5px 1px = 2rpx iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

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

    建议:

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

    注意:

    三. 样式导入

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

    @import@import;

    示例代码:

    示例代码:

    /** common.wxss **/
    .small-p {
      padding:5px;
    }
    

    /** common.wxss **/
    .small-p {
    padding:5px;
    }

    /** app.wxss **/
    @import "common.wxss";
    .middle-p {
      padding:15px;
    }
    

    /** app.wxss **/
    @import "common.wxss";
    .middle-p {
    padding:15px;
    }

    四. 内联样式

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

    • style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
  • style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
  • <view style="color:{{color}};" />
    
    

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

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

    <view class="normal_view" />
    

    <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 组件前边插入内容
    选择器 样例 样例描述 选择器 样例 样例描述 选择器 样例 样例描述 .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 组件前边插入内容 .class .intro 选择所有拥有 class="intro" 的组件 .class .intro

    .intro

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

    #firstname

    选择拥有 id="firstname" 的组件 element view 选择所有 view 组件 element view

    view

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

    view, checkbox

    选择所有文档的 view 组件和所有的 checkbox 组件 ::after view::after 在 view 组件后边插入内容 ::after view::after

    view::after

    在 view 组件后边插入内容 ::before view::before 在 view 组件前边插入内容 ::before view::before

    view::before

    在 view 组件前边插入内容

    六. 全局样式与局部样式

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

    » 本文来自:前端开发者 » 《微信小程序前端样式WXSS书写_冘醉_前端开发者》
    » 本文链接地址:https://www.rokub.com/73355.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!