同学们大家好，我是小伊同学，今天进入WXSS部分的学习，首先我们还是先来讲解一下基本语法。

  本部分我们将要学习的知识点如下所示：

  经过之前的课程，相信各位同学已经对wxss有了初步的印象，那么本节课，我们就来具体地学习一下wxss。

  WXSS的全称为WeiXinStyle Sheets，是一套样式语言，用于描述WXML的组件样式。它是由CSS语言，全称为CascadingStyle Sheets，修改扩充而来，因而具备了CSS的大部分特性。如果说css是一种用来变美的语言，那么wxss也同样如此，它决定了wxml中的组件应该如何显示，通过wxss的代码，我们可以对组件设置字体、颜色、位置、大小等样式，也能够添加动画效果，使页面呈现出最佳的视觉效果。

  那么，我们如何写一段wxss代码呢？下面我们就来学习一下wxss的语法，基本上和css是一致的。

  一段wxss代码首先是选择器，选择器的作用是指明针对哪些wxml组件使用此样式，选择器后为一个花括号，括号内部为属性和属性值。属性表明了我要设置这个组件哪个方面的样式，是字体大小还是颜色什么的，不同属性名称的含义不同。冒号后面跟着属性值，表明对于该属性我要设置成什么样子，如果是颜色，这里就填颜色值，如果是字体大小，那么这里就是字号。我们把属性和属性值称作一条声明，使用分号作为结束符。一个花括号中可以包含多条声明。所有这些组合起来成为声明块，代表了一种样式格式。

  下面的例子是一段简单的wxss代码，点txt是这个样式格式的名字，也是选择器，表示在wxml中的样式属性被设置为txt的组件使用wxss文件中的此样式进行展示。整个声明块中有三条声明，分别对三个属性进行了设置：字体大小设置为50rpx，颜色设置为橙色，背景颜色设置为小麦色。

  之前我们说到wxss是在css上修改而来的，那么wxss与css的区别在哪呢，下面我们就要介绍在wxss中特有的尺寸单位，细心的同学可能已经发现了，在上一页ppt的字体大小中，我设置为了50rpx，这里的rpx就是一种特殊的尺寸单位。

  做过网页前端的可能都知道，在网页上如何衡量尺寸呢？比如组件的长和宽、字体大小等很多地方都需要用到尺寸。一般在网页前端，为了避免因为显示器的大小及分辨率等因素的差异带来前端展示效果的破坏，我们使用的是px，它代表了像素，是一种在所有电脑上都能使用的单位。

  但是我们知道，网页是有滑动条的，如果页面超出窗口大小，可以很方便地向右或者向下滑动的，而像小程序这样，如果无法在一个屏幕上展示全部页面无疑用户体验会非常不好，这就要求小程序开发者必须知道手机屏幕的长和宽到底有多少像素，以确定组件的大小不会超出。

  但是每个手机的屏幕大小也不尽相同，因此为了更好的用户体验，避免用户手机屏幕物理尺寸和分辨率的问题，微信在px的基础上使用了一种新的单位，这就是rpx，它可以根据屏幕宽度进行自适应。

  具体来说是如何做到自适应的呢？这里微信规定了，一个页面的宽度就是750rpx，开发者使用这一单位进行开发，能够保证页面大小不会超出，而对rpx和真实大小的映射由微信统一完成，在不同手机上只是映射关系不同，而对rpx单位来说大家都是750rpx。

  例如，在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx= 375px = 750物理像素，1rpx= 0.5px = 1物理像素，开发者设定多少rpx会被计算折合与该手机对应的实际大小而被显示。

  因此，在微信小程序的开发中，如果需要在样式上用到尺寸单位，我们尽量使用rpx。需要说明的是px单位也是可以使用的，但不能保证在所有手机上都能使展示效果与开发者在预览的时候一致。而当样式错乱以后，页面往往都会非常难看，所以使用rpx单位就成为了一种小程序代码的编写习惯。此外，我们有时也会使用百分比来表示尺寸，他表示占上一层容器尺寸的百分比。

  好了，本节课的内容就到这里，我们明天继续。如果大家有什么问题，欢迎在文末留言。

想看视频版？

关注公号“微程序学堂”，我们的****即将上线

如果你自己写了好文章想投稿

请联系我们