⼆、⽀付宝⼩程序前端样式的设计.acss样式详解
关于.acss⽂件
在视频中已经说过了，⼩程序的设计思想和原⽣app的设计思想颇为相似，基本的应⽤单元为页⾯。当然对于⼀个页⾯来说每⼀个元素的放置位置在哪⼉以及显⽰成什么样⼦这个是由样式来决定的。我们知道在web开发中样式是在css⽂件中规定的，叫做层叠样式表 (Cascading Style Sheets)。其实在APP中样式的约束也是使⽤css，在⽀付宝⼩程序中也是使⽤css不过⽂件的后缀是.acss⽽且对css3进⾏了扩充⽽已。
CSS3是CSS技术的升级版本，CSS3语⾔开发是朝着模块化发展的。以前的规范作为⼀个模块实在是太庞⼤⽽且⽐较复杂，所以，把它分解为⼀些⼩的模块，更多新的模块也被加⼊进来。这些模块包括： 盒⼦模型、列表模块、超链接⽅式、语⾔模块 、背景和边框 、⽂字特效 、多栏布局等。
那么在⽀付宝⼩程序中的.acss和⼩程序中的.wxcss没有什么两样。上边已经说了.acss其实包含了css3那么它还有⼀些新的特性是css3中不具备的，让我们⼀⼀看看
rpx
第⼀次看到这个东西也能猜到他是⼲什么⽤的。在css中我们知道规定⼤⼩⼀般使⽤像素(px)这个单位。
⽐如显⽰⽣活中我们说房⼦128㎡那这⼉的单位是平⽅⽶，在开发中需要更加精准的⼤⼩就是px像素。像素就⾮常精细了因为在我们显⽰屏幕中像素是最⼩的显⽰单元。这个道理如果不懂的话就个LED屏幕仔细看，LED屏幕上⼀个⼀个的发光⼆极管可以想象为像素。
px为单位导致的问题
我们知道⼿机屏幕有⼤有⼩，就拿iPhone来说，iPhone 6 plus⽐iPhone 5要⼤。那么就说明plus的像素⽐5要多。对⽐：iPhone 6 plus和iPhone5的尺⼨对⽐
⼿机宽度⾼度
⼿机宽度⾼度
iPhone 6 plus414px736px
手机上可以打html与css的app
iPhone 5320px568px
加⼊有⼀个160px宽度的红⾊矩形在这两种⼿机中的位置如下：
px作为单位时的问题
那么rpx的特殊之处在哪⼉呢？
rpx（responsive pixel）可以根据屏幕宽度进⾏⾃适应。如何⾃适应呢？看下边的分析：
不管⼀个屏幕有多宽我们可以对屏幕平均分配吧。既然iPhone 6 plus宽度为414px，iPhone 5的宽度为320px。如果创建⼀个宽度为160px的矩形那么在iPhone 5 中占有⼀半的宽度，但是在iPhone 6 plus中不⾜⼀半，在⼿机显⽰中不是很好看。那么我们不管屏幕多宽都给他分750份。那么在iPhone 6 plus中每⼀份就是414/750=0.552px ⽽对于iPhone 5的每⼀份就是320/750=0.42px。那现在我们规定⼤⼩和位置时不使⽤px⽽使⽤份数来表⽰如何呢？⽐如我们规定⼀个红⾊的矩形在iPhone 6 plus中占有375份(375x0.552=207px)，在iPhone 5中也是325份
(375x0.42=157.5px)。
再来看看，都占有375份的情况下iPhone 6 plus中的宽度207px（约占有总宽度414px的50%），⽽iPhone 5中的宽度157.5px（约占有总宽度320的50%）。也就是在两个不同尺⼨的屏幕上当以份数来规定是占有的⽐例是差不多的。
⽽这个份数就是rpx
看下图：
使⽤rpx的好处
样式导⼊
在模块化开发中我们有时候不得不在页⾯中使⽤其他的第三⽅库的样式，⽽第三⽅库的样式是保存在第三⽅包中的，我们不可能全部复制到我们的.acss⽂件中，那最好的办法就是导⼊了。在样式表中导⼊其他外联样式表。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。