微信小程序9（wxss）

Posted 2021-08-26 晨沉宸辰

wxss

• 一、概述
• 二、尺寸单位
• 三、样式导入

一、概述

1. wxss是一套样式语言，用于描述wxml的组件样式
2. 与css相比，wxss扩展的特性有：

• 尺寸单元
• 样式导入

二、尺寸单位

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

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况

三、样式导入

/* pages/index6/index6.wxss */
.box1{
  width: 50px;
  height:50px;
  background-color:aqua;
}

<view class="box1"></view>

这样设定的色块是不是根据手机长宽改变大小的
所以为了可以改变大小
我们进行更新：

/* pages/index6/index6.wxss */
.box1{
  width: 100rpx;
  height:100rpx;
  background-color:aqua;
}

为什么这样改？
因为rpx转化为px是需要长宽的参与的，但是rpx与长宽没有关系
增加字体大小：

/* pages/index6/index6.wxss */
.box1{
  width: 100rpx;
  height:100rpx;
  font-size:100rpx;
  background-color:aqua;
}