网站挑错,网站原创内容优化,网站建设 官,常用网站设计缩略图WXSS (WeiXin Style Sheets)是一套样式语言#xff0c;用于描述 WXML 的组件样式#xff0c;决定了 WXML 的组件会怎么显示。
WXSS 具有 CSS 大部分特性#xff0c;同时为了更适合开发微信小程序#xff0c;WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比#xff0c;WXSS …WXSS (WeiXin Style Sheets)是一套样式语言用于描述 WXML 的组件样式决定了 WXML 的组件会怎么显示。
WXSS 具有 CSS 大部分特性同时为了更适合开发微信小程序WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比WXSS 扩展的特性主要包括尺寸单位和样式导入。
一 尺寸单位
首先我们来学习一下尺寸单位这个新特性。在CSS中我们通常使用的单位是px但在WXSS中单位是rpx。rpxresponsive pixel可以根据屏幕宽度进行自适应也就是说它的大小并不是固定的会根据屏幕大小的改变而改变。
我们通过一个案例来认识一下rpx与px的区别。例如这段代码设置黄色区域宽高均为定值100px在手机型号为iPhone5320 * 568时显示为下图样式 还是这段代码但是我们把机型改成iPad768 * 1024可以看出黄色区域的大小并没有改变。
接下来我们修改代码把黄色区域的宽高改为100rpx再来看结果。当机型是iPhone5时可以很明显的看出黄色区域变小了。 当机型为iPad时黄色区域也随着变大。 试想一下当我们在开发微信小程序时我们是希望元素的大小固定呢还是随着不同用户设备的大小改变呢自然是后者。这就是rpx存在的意义。
再啰嗦一下假设黄色区域是一个轮播图需要平铺整个页面的上半部分如果使用rpx就是这样的
无论在什么设备上我们都能实现横向的平铺。那么如何界定“平铺”的大小呢微信小程序规定屏幕宽为750rpxrpx与px之间的换算关系取决于屏幕的宽度。
例如在屏幕宽度刚好为750px的设备上那么换算关系就是 750rpx 750px 1rpx 1px 那么如果屏幕宽度为375px呢例如iPhone6代入上面的表达式 750rpx 375px 2rpx 1px 总结一下rpx与px之间的换算关系为 rpx换算px 屏幕宽度/750 px换算rpx750/屏幕宽度 除了我们人工进行换算还可以直接使用calc属性来表达
view {width:calc(750rpx * 100 / 375);
} 需要注意的一点是750和rpx之间不能有空格。
calc() 函数在CSS中也可以使用其参数是一个表达式用表达式的结果作为值。
二 样式导入
我们知道在CSS中样式引入有行内样式 、 外部样式 、 内部样式三种方式而在wxss中则简单很多。
方式一行内样式
微信小程序组件支持使用style属性来控制组件的样式用法与CSS一致不再赘述。
方式二导入外联样式表
在wxss中使用import语句可以导入外联样式表import后跟需要导入的外联样式表的相对路径用;表示语句结束。
import common.wxss;方式三外部样式
也就是我们通常使用的在wxss中直接写语句了与CSS不同的是我们无须在wxml文件中使用link标签引入样式。
三 选择器
小程序不支持通配符*
小程序不支持通配符*
小程序不支持通配符*
也就是说我们在CSS中经常写的:
* {padding:0;margin:0;
}
这段代码在wxss中是无效的。
其他选择器与CSS均相同具体如下 四 外部样式与内部样式
我们之前在微信小程序新手入门教程一零基础上手_自学微信小程序教程-CSDN博客中学习过定义在app.wxss 中的样式为全局样式作用于所有页面而在pages文件夹下的xx.wxss中的样式之作用于对应的页面也就是局部样式。需要说明的是局部样式优先级高于全局样式也就是说局部样式中的内容会盖 app.wxss 中相同的选择器。 今天我们学习的内容比较简单基本与我们熟悉的CSS语法一样只有一点点新知识。接下来我们学习重头戏也是自己动手写小程序的最后一步组件。学习完组件的内容我们就可以设计自己的小程序了
