首页 > 其他分享 >wxss和css的区别

wxss和css的区别

时间:2024-03-13 19:59:43浏览次数:28  
标签:wxss 区别 样式 微信 示例 导入 css WXSS CSS

目录

1. 语法差异

2. 尺寸单位

3. 样式导入

WXSS 示例代码:

CSS 示例代码:

4. 组件和属性的支持

总结


WXSS (WeiXin Style Sheets) 和 CSS (Cascading Style Sheets) 都是用于描述文档样式的语言,但它们在微信小程序和网页开发中有一些关键的区别。以下是它们之间的主要差异,并附有代码示例:

1. 语法差异

WXSS 和 CSS 的语法在大多数情况下是相似的,但 WXSS 有一些特定的扩展和限制。例如,WXSS 支持一些特定的选择器,如 .class#idelementelement,element:pseudo-class::pseudo-element 等,但它不支持 CSS 的某些高级选择器,如属性选择器 [attribute]

2. 尺寸单位

WXSS 引入了新的尺寸单位 rpx(responsive pixel),它可以根据屏幕宽度进行自适应。在宽度为 750rpx 的屏幕下,1rpx 等于 1个物理像素。而在其他屏幕下,rpx 会根据屏幕宽度进行等比缩放。CSS 则使用传统的像素(px)、百分比(%)、em、rem 等单位。

3. 样式导入

WXSS 支持使用 @import 语句来导入外部样式表,但和 CSS 的 @import 相比,它有一些限制和特定的语法。

WXSS 示例代码:

/* 使用 rpx 单位 */
.container {
width: 750rpx; /* 在宽度为750rpx的屏幕下,宽度为整个屏幕宽度 */
height: 200rpx;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
}
/* 导入其他 WXSS 文件 */
@import "common.wxss";

CSS 示例代码:

/* 使用传统的单位 */
.container {
width: 100%; /* 宽度为父元素的100% */
height: 200px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
}
/* 导入其他 CSS 文件 */
@import url('common.css');

4. 组件和属性的支持

WXSS 针对微信小程序的组件进行了样式支持的优化,一些样式属性在小程序中有特殊的表现,如 flex 布局在微信小程序中得到了更好的支持。CSS 则主要针对标准的网页元素和布局进行支持。

总结

WXSS 和 CSS 在语法上大体相似,但由于它们分别服务于微信小程序和网页开发,因此在单位、选择器支持、样式导入和组件样式支持方面存在明显的差异。在实际开发中,需要根据开发平台(微信小程序或网页)选择合适的样式语言。

标签:wxss,区别,样式,微信,示例,导入,css,WXSS,CSS
From: https://blog.csdn.net/m0_72603435/article/details/136623491

相关文章

  • Css基础——vertical-align属性
    1、vertical-align的定义CSS的vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐。官方解释:用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。2、vertical-align的语法vertical-align:baseline|top|midd......
  • CSS 学习第一天
    #层叠样式表样式:文字大小、背景颜色、元素宽高等等层叠:类似于化妆、一层一层的进行修饰表:列表#行内样式写在标签的style属性中(又称:内联样式)style 样式要符合CSS规范(名:值;)的形式,最好放在<head>标签中!!多个html无法重复使用设置的CSS样式#外部样式写在单独的.css文......
  • CSS学习第三期(新手勿喷)
    今天是我第三天学习CSS,今天在昨日的基础之上,学习了关于盒子的CSS属性,以及背景的属性,还有选择器和透明度,浮动,话不多说开始今天的分享。一。盒子的属性盒子的属性中有宽,高,背景颜色,文字颜色,文字的粗细,文字的大小,文字的水平对齐,上下和居中,边框的颜色,边框的宽度,还有变宽的线条;1.1......
  • print 与 println 的区别
    代码举例publicclassForDemo02{publicstaticvoidmain(String[]args){//循环打印1~1000之间能被5整除的数,并且每行打印3个for(inti=0;i<=1000;i++){if(i%5==0){System.out.print(i+"\t"); //相......
  • 震惊!css居然可以这么用!
       如果说html是盖房子,那么css就是装修房子,它可以决定外观、样式、和位置等网页元素。一、css的几种使用方式    1、行内样式    所有标签都自带有style属性,因此给标签加一个style=“样式1:样式1的值;样式2:样式2的值”,如果有多个样式,样式和样式之间......
  • C#面:System.Array.CopyTo() 和 System.Array.Clon() 的区别
    二者都是用于复制数组的方法,但它们有一些区别:System.Array.CopyTo():方法签名:voidCopyTo(Arrayarray,intindex)功能:将当前数组的所有元素复制到另一个数组中。参数:array:目标数组,即要将元素复制到的数组。index:目标数组中的起始索引,从该索引开始复制元素。返回值:无注意......
  • Springcloud学习笔记62---log.error()打印内容区别
    1. log.error(“异常信息:”+e.getMessage)没有异常信息,没有堆栈信息@PostMapping("/logtest")publicvoidlogtest(){try{inti=1/0;}catch(Exceptione){log.error("异常信息:"+e.getMessage());}......
  • Pinia和Vuex有什么区别?
    API设计:Pinia的API设计更加简洁和直观。它采用了类似于VueCompositionAPI的风格,使用了更加现代化的语法和概念。相比之下,Vuex的API设计较为传统,使用了基于对象和字符串的方式来定义和访问状态。TypeScript支持:Pinia天生支持TypeScript,并提供了更好的类型推断和类型安全......
  • Golang - grpc和http的区别
    gRPC和HTTP都是网络协议,但是它们之间存在一些显著的区别。1、传输协议HTTP使用文本基础的协议,而gRPC使用的是二进制协议,这意味着gRPC数据包更小,传输效率更高。另外,gRPC使用HTTP/2协议,支持多路复用,从而可以更好地处理并发请求。2、性能差异gRPC在性能方面优于HTTP。由于使用了二进......
  • CSS下划线动画
    <template><divclass="home"><h2class="title"><span>FromthemomentIsawyou,myheartbegantobeatinadifferentrhythm.Yoursmileislikearayofsunshinethatwarmsmywor......