学习微信小程序WXSS与CSS的不同

2021-04-21    分类: 微信小程序

相同点

width:设置元素宽度。
height:设置元素高度。
position:设置元素定位方式。
color:设置元素内文本的颜色。
border:设置元素的边框样式。

WXSS的补充和修改

1. 尺寸单位rpx

rpx是响应式像素。因为微信小程序不能识别rem等像素单位。不过rpx和rem很相似,可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。


注:rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。


设备像素(device pixel):设备能控制的屏幕显示的最小物理单位,这些物理单位是显示屏幕上的一个个点,这些点是固定的。

CSS像素(CSS pixels):web编程中的逻辑像素。

PPI/DPI(pixel per inch):每英寸拥有的像素数目。数值越高代表显示屏能以越高的密度显示图像。

DPR(devicepixelRatio):手机的某一方向上设备像素和CSS像素之比。在微信开发者工具里模拟器上方切换不同设备时,就可以看到对应的DPR数值。

2. 外联样式导入

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


外联样式是有执行顺序的,从上到下,从左到右。


<!-- index.wxml -->

<view class="container">

Hello,world!

</view>


/** index.wxss **/

@import './assets.wxss';

.container{

color: red;

}

/**assets.wxss**/

.container{

border: 1px solid #000;

}

如果index.wxss中的container标签设置border属性为别的颜色,就会覆盖assets.wxss里设置的黑色边框。


3. 内联样式

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


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

<!--index.wxml-->

<view style="width:500rpx;height:30px;background-color:{{colorValue}};">

Hello,world!

</view>


//index.js

Page({

data:{

colorValue:'red'

}

})

过绑定背景颜色的值为变量,在index.js里data设置了一个colorValue值为红色。

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

所以一般把静态样式属性写入class中,把动态样式属性写入style。


4. 选择器


其他还有实际测试过的nth-type-of(n)(匹配属于父元素的特定类型的第 N 个子元素的每个元素) 等选择器也能在微信小程序里使用,所以以实际表现为准,官方文档漏缺的地方可以在开发者社区反馈。

选择器的优先级

!important (不算做选择器,只是提升权重) — 权重 无穷大

style (标签内联样式) — 权重 1000

#element(id选择器) — 权重 100

.element (class选择器) — 权重 10

element — 权重 1

当在一个样式中申明了一个!important 的规则时,这个规则会覆盖其他任何申明。因为!important 的权重是高的,所以使用时尽量小心,因为它会破坏样式表中固有的规则。

在制作小程序插件时,可以把某个功能封装起来,做成插件分享给别人使用。而我们使用别人的插件时,想要修改插件对应元素的样式,除了可以在插件的代码里修改,也可以在引入插件的外层使用!important 这个申明规则来直接修改。


/** index.wxss **/

.title{

color: red !important;

}

强制修改title里的文字颜色为红色。

分享名称:学习微信小程序WXSS与CSS的不同
网站路径:/news22/109172.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有微信小程序

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

猜你还喜欢下面的内容

h5响应式网站建设

微信小程序知识

分类信息网