`

微信小程序学习之路《十》 WXSS

 
阅读更多

微信小程序开发 - WXSS

 

WXSS是微信自定义的一套样式,基本和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 作为视觉稿的标准。 

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

 

样式导入

 

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

 

/** common.wxss **/

.small-p {

  padding:5px;

}

/** app.wxss **/

@import "common.wxss";

.middle-p {

  padding:15px;

}

 

(2)内联样式:框架组件上支持使用 style、class 属性来控制组件的样式。

 

Style:接受动态样式,在运行时会进行解析,尽量避免将静态样式写到style中,以免影响渲染速度。

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

   

Class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合。

<view class="normal_view" />


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

  • 大小: 33.9 KB
  • 大小: 8.6 KB
分享到:
评论

相关推荐

    微信小程序模板(几十个)

    总的来说,"微信小程序模板(几十个)"这个资源对于初学者和开发者来说都是宝贵的工具,它们不仅可以快速启动项目,还可以作为学习和参考的对象,帮助提升微信小程序的开发技能。通过深入研究和实践,你可以掌握从...

    自助点餐微信小程序源码.zip

    自助点餐微信小程序源码 自助点餐微信小程序源码 自助点餐微信小程序源码 自助点餐微信小程序源码 自助点餐微信小程序源码 自助点餐微信小程序源码 自助点餐微信小程序源码 自助点餐微信小程序源码 ...

    微信小程序之视图层wxss

    微信小程序之视图层wxss,微信小程序之视图层wxss,微信小程序之视图层wxss

    微信小程序中使用wxss加载图片并实现动画效果

    在微信小程序中,WXSS(WeiXin Style Sheets)是一种样式表语言,用于描述微信小程序的组件样式,它类似于网页开发中的CSS。WXSS与CSS相比,主要有以下区别:WXSS支持rpx尺寸单位,它可以根据屏幕宽度进行自适应,而...

    微信小程序开发demo app.wxss

    微信小程序开发demo app.wxss

    微信小程序项目实例——今日美食

    总的来说,“微信小程序项目实例——今日美食”是一个集前端技术、后端数据管理、用户体验设计于一体的综合项目,对于学习微信小程序开发和移动应用设计的人员来说,是一个很好的实践案例。通过分析和实施这个项目,...

    微信小程序wxss文件stylelint配置stylelint-config-wxss-master.zip

    `stylelint-config-wxss-master.zip`就是一套专门为微信小程序wxss文件定制的stylelint配置。 stylelint是一款强大的CSS静态检查工具,它可以检测出CSS语法错误、潜在的性能问题以及不符合编码规范的代码。`...

    微信小程序源码-仿酷狗音乐微信小程序

    通过分析和学习这个“仿酷狗音乐微信小程序”的源码,开发者不仅可以提升微信小程序的编程技巧,还能对音乐类应用的常见功能有更深入的理解。同时,这也是一个很好的实战项目,帮助开发者将理论知识转化为实际操作...

    微信小程序项目实例-精简小程序商城源码纯前端项目

    在这个“微信小程序项目实例-精简小程序商城源码纯前端项目”中,我们可以深入学习和理解微信小程序的开发流程、技术栈以及如何构建一个简单的小程序商城。 首先,我们要知道,微信小程序的开发主要基于JavaScript...

    微信小程序源码下载 微信小程序源码下载 2000套微信小程序源码

    本资源包含2000套微信小程序的源码,对于开发者来说是一份宝贵的参考资料,可以用来学习、研究或者作为开发新项目的起点。 源码下载是开发者获取程序原始代码的方式,对于学习和理解编程逻辑至关重要。这些微信小...

    【微信小程序-毕设期末大作业】通讯录微信小程序源码.zip

    这个项目适用于那些希望学习或实践微信小程序开发的学生或开发者,尤其适合作为毕业设计或期末大作业。源码的提供使得学习者可以直接查看和分析项目的实现细节,有助于加深对微信小程序开发流程和框架的理解。 1. ...

    微信小程序 实例汇总 完整项目源代码

    1. **框架结构**:微信小程序基于一套自定义的XML-like语法,称为WXML(微信小程序标记语言)和WXSS(微信小程序样式语言),它们分别负责结构和样式。同时,JavaScript用于处理逻辑和数据绑定。 2. **页面生命周期...

    微信小程序 教程之列表渲染

    微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML wx:for 在...

    微信小程序-模仿QQ小程序

    本项目“微信小程序-模仿QQ小程序”旨在通过模仿QQ小程序的界面和功能,帮助开发者学习和掌握微信小程序的开发技巧。 首先,我们需要了解微信小程序的基本结构。微信小程序由JSON、WXML、WXSS和JavaScript四部分...

    微信小程序日历插件

    总的来说,实现微信小程序日历插件需要对小程序的基本框架有深入理解,包括WXML、WXSS、JavaScript以及数据绑定和事件处理。通过不断实践和优化,我们可以创建出既美观又实用的日历组件,满足不同场景的需求。对于...

    微信小程序Demo

    在这个"微信小程序Demo"中,我们可以看到一个实际的小程序开发案例,这对于学习和理解微信小程序的开发流程及其技术栈是非常有帮助的。 首先,我们要了解微信小程序的基础架构。它主要基于JavaScript、WXML(微信小...

    猫眼微信小程序源码.zip

    本篇将深入探讨“猫眼微信小程序源码”,揭示其背后的开发技术和设计理念,为有意从事微信小程序开发的人员提供宝贵的学习资源。 猫眼微信小程序作为一款集电影票购买、影片信息查询、影评分享等功能于一体的娱乐...

    微信小程序课程表小程序源码.zip

    1. **框架结构**:微信小程序使用了基于WXML(微信小程序标记语言)和WXSS(微信小程序样式语言)的开发框架,结合JavaScript处理业务逻辑。源码中可能包含app.js、app.json、app.wxss等全局配置文件,以及各个页面...

    微信小程序-二十四节气小程序源码及项目截图

    本项目以“二十四节气”为主题,提供了一个微信小程序的源码及项目截图,帮助学习者了解和实践微信小程序的开发。 在该项目中,你可以找到以下几个关键知识点: 1. **微信开发者工具**:首先,你需要下载并安装...

Global site tag (gtag.js) - Google Analytics