前言

上文我们已经了解了小程序的模板语法，并详细认识了一些基本的语法，新手建议从第一章开始看

零基础学小程序 —— 小程序入门（一）

接下里我们将讲解小程序的模板样式

说到样式可能很多同学的想法是样式不重要，反正都会写。其实我一开始也在犹豫要不要把模板样式写上去，因为样式对于一个老程序员来说确实挺简单的，但是对于一些刚进入企业或者一些刚入门的新手程序员来说，可能你觉得你的样式写的没问题，但是别人一看你的代码就会觉得你是个新手，所以这里想讲讲模板样式，后面会把我自己的一些写样式在习惯加在后面，如果你觉得作者有什么地方写的不对的，也欢迎评论区提出，废话不多说，直接开始。

1.什么是 WXSS

WXSS 是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS

2.WXSS 和 CSS 的关系

WXSS 具有 CSS 大部分特性，同时，WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。
与 CSS 相比，WXSS 扩展的特性有：

1.rpx 尺寸单位
2.@import 样式导入

3. rpx

3-1 什么是 rpx 尺寸单位

首先我们需要知道什么是rpx尺寸单位，

先看看官方的说法

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

简单来说 rpx就是微信小程序独有的，用来解决屏适配的尺寸单位。

? 3-2 rpx 的实现原理

了解了什么是rpx 那么下面来简单说说rpx的实现原理

rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，
在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx）。
在较小的设备上，1rpx 所代表的宽度较小
在较大的设备上，1rpx 所代表的宽度较大
小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

这里说rpx在我们实际开发中我们使用rpx的时候使用完之后一定要记得多去ios系统上测试，特别是两个盒子紧贴在一起的时候如果我们使用rpx在苹果的一些机型上可能会出现有间隙的情况

3-3 rpx 与 px 之间的单位换算

在 iPhone6 上，屏幕宽度为375px，共有750 个物理像素，等分为 750rpx。
750rpx = 375px = 750 物理像素? ?1rpx = 0.5px = 1物理像素

这里我们在实际开发过程中如无特殊情况基本上都是以2rpx等于1px进入转换的

?4.?样式导入

?4-1 什么是样式导入

使用过一些css预处理器的同学应该就知道什么是样式导入，WXSS 提供的 @import 语法，可以导入外联的样式表。

4-2 @import 的语法格式

@import的语法格式跟我们的css预处理器使用方式一样

@import 后跟需要导入的外联样式表的相对路径，

举个例子首先我们在pages同级新建一个static文件夹在新建一个commit.wxss

?在commit.wxss写入

.fz20{
  font-size: 20px;
}

然后在我们的index.wxss中引入

@import '../../static/commit.wxss';

这里需要注意的是最后一定需要加上;表示结束

然后在我们的index.wxml中直接使用

  <view class="usermotto">
    <text class="user-motto fz20">{{motto}}</text>
    <button bindtap="btn" data-info="{{'你好呀'}}">确定</button>
    <input  bindinput="inputbtn" style="border: 1px solid #5cf;" />
  </view>

然后可以看到