小程序2-基本架构讲解(一)WXSS样式

项目里边生成了不同类型的文件:

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

WXSS 样式

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。 WXSS 具有 CSS 大部分的特性

新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
此外 WXSS 仅支持部分 CSS 选择器

尺寸单位

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

样式导入

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

@import "common.wxss";

转载于:https://www.cnblogs.com/niehanyu/p/10697075.html

小程序2-基本架构讲解(一)WXSS样式相关推荐

微信小程序的线程架构
小程序的线程架构每个小程序包含一个描述整体程序的app实例和多个描述页面的page. 其中app由3个文件构成: app.json 公共配置文件 app.wxss 公共样式文件 app.js 主体逻 ...
浅谈小程序开源业务架构建设之路
导读:本文首先引入百度小程序开源生态介绍,随后在发展道路中遇到厂商浏览器合作场景,引出小程序分发保障的痛点和挑战,接着分别从分发通路.能力检测.能力匹配以及能力干预方面详细探讨了具体的方案和设计,最后 ...
微信小程序黑马优购讲解
微信小程序黑马优购讲解 1.准备工作 1.首先拿到项目后做好项目搭建 2.搭建基础页面分类页面列表页内容详情页面我的页面意见反馈页面 1.准备工作 1.首先拿到项目后做好项目搭建 (1)搭建 ...
支付宝小程序Serverless服务架构演进 | mPaaS 线下沙龙 CodeDay#1 分享实录
文章概要: 随着云计算的深入,Serverless 这种全新的架构模式正在受到越来越多人的关注.通过 Serverless,开发者可以从繁杂的底层基础实施中解放出来,专心聚焦于业务实现,快速铺开业务. ...
支付宝小程序 Serverless 服务架构演进 | mPaaS 线下沙龙 CodeDay#1 分享实录
文章概要: 随着云计算的深入,Serverless 这种全新的架构模式正在受到越来越多人的关注.通过 Serverless,开发者可以从繁杂的底层基础实施中解放出来,专心聚焦于业务实现,快速铺开业务. ...
wxml修改样式_微信小程序动态绑定事件并实现事件修改样式
微信小程序动态绑定事件并实现事件修改样式实例代码 wxml {{item.name}} js var reportTypeList = [ { name: "日报1", id: ...
小程序PHP字体,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...
微信html字体颜色代码,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...
浅析微信小程序的底层架构原理
一.小程序基础知识小程序是基于WEB规范,采用HTML.CSS和JS等搭建的一套框架,微信官方给它们取的名字:WXML.WXSS,但本质上还是在整个WEB体系之下构建的.WXML说到底就是xml的一 ...

小程序2-基本架构讲解(一)WXSS样式

WXSS 样式

尺寸单位

样式导入

小程序2-基本架构讲解(一)WXSS样式相关推荐

最新文章

热门文章