微信小程序——wxss和css的区别

1. 语法差异


WXSS 和 CSS 的语法在大多数情况下是相似的,但 WXSS 有一些特定的扩展和限制。例如,WXSS 支持一些特定的选择器,如 .class、#id、element、element,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 在语法上大体相似,但由于它们分别服务于微信小程序和网页开发,因此在单位、选择器支持、样式导入和组件样式支持方面存在明显的差异。在实际开发中,需要根据开发平台(微信小程序或网页)选择合适的样式语言。

相关推荐

  1. 程序——wxsscss区别

    2024-04-01 09:46:02       42 阅读
  2. 程序wxsscss差异

    2024-04-01 09:46:02       63 阅读
  3. 程序wxsscss区别

    2024-04-01 09:46:02       44 阅读
  4. 程序wxss css 、wxml html 区别

    2024-04-01 09:46:02       53 阅读
  5. WXML,WXSSHTML,CSS区别

    2024-04-01 09:46:02       30 阅读
  6. 程序bindtapcatchtap区别

    2024-04-01 09:46:02       64 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-01 09:46:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-01 09:46:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-01 09:46:02       82 阅读
  4. Python语言-面向对象

    2024-04-01 09:46:02       91 阅读

热门阅读

  1. uView内置样式

    2024-04-01 09:46:02       43 阅读
  2. Github2024-03-31 开源项目日报 Top10

    2024-04-01 09:46:02       47 阅读
  3. GitHub常用命令

    2024-04-01 09:46:02       35 阅读
  4. 量化交易入门(三十五)回测框架backtrader-Strategy

    2024-04-01 09:46:02       41 阅读
  5. three.js昼夜切换,白天黑夜的实现(含源码)

    2024-04-01 09:46:02       37 阅读
  6. python_2

    python_2

    2024-04-01 09:46:02      34 阅读
  7. 20.helm安装最新kubernetes dashboard

    2024-04-01 09:46:02       39 阅读