如果想让该样式库作为公共样式的话，可以在appwxss文件中写入
@import "样式库路径";
如果只是作为某个页面的样式，可以在该页面的wxss文件中写入
@import "样式库路径";
在视频中已经说过了，小程序的设计思想和原生app的设计思想颇为相似，基本的应用单元为页面。当然对于一个页面来说每一个元素的放置位置在哪儿以及显示成什么样子这个是由 样式来决定的 。我们知道在web开发中样式是在css文件中规定的，叫做层叠样式表 (Cascading Style Sheets)。其实在APP中样式的约束也是使用css，在支付宝小程序中也是使用css不过文件的后缀是acss而且对css3进行了扩充而已。
那么在支付宝小程序中的acss和微信小程序中的wxcss没有什么两样。 上边已经说了acss其实包含了css3那么它还有一些新的特性是css3中不具备的，让我们一一看看
第一次看到这个东西也能猜到他是干什么用的。在css中我们知道规定大小一般使用像素(px)这个单位。比如显示生活中我们说房子128㎡那这儿的单位是平方米，在开发中需要更加精准的大小就是px像素。像素就非常精细了因为在我们显示屏幕中像素是最小的显示单元。这个道理如果不懂的话就找个LED屏幕仔细看，LED屏幕上一个一个的发光二极管可以想象为像素。
我们知道手机屏幕有大有小，就拿iPhone来说，iPhone 6 plus比iPhone 5要大。那么就说明plus的像素比5要多。对比：
加入有一个160px宽度的红色矩形在这两种手机中的位置如下：
rpx（responsive pixel）可以根据屏幕宽度进行自适应。如何自适应呢？看下边的分析：
看下图：
在模块化开发中我们有时候不得不在页面中使用其他的第三方库的样式，而第三方库的样式是保存在第三方包中的，我们不可能全部复制到我们的acss文件中，那最好的办法就是导入了。在样式表中导入其他外联样式表。
当然仍旧支持内联样式和class属性制定样式类，如
选择器和css3的保持一致。一般有class=”test”类选择器和id=”test”的id选择器。当然在支付宝小程序的样式中特殊的地方就是：
※ a- 或者 am-为前缀的选择器已经被系统占用所以不要使用；
※ 不能使用属性选择器，例如,以下写法不被支持：
我之前说过小程序开发的应用单元为页面。其实我们在axml中写的页面并不包含页面容器，就相当于我们做一个页面但是body标签不用写那如果我们要改变整个页面的背景怎么办呢其实有一个固定的选择器。例如：
可以通过 page 元素选择器来设置页面容器的样式，比如页面背景色:
在你想改变页面容器的页面中定义该样式也可以，全局定义也可以，例如我想将test这个页面的页面容器背景设置为蓝色，就可以再pages目录下的test目录下找到testacss在其中定义page的样式
下节是视图层讲解，如果有任何问题可以再下方给我留言或者发邮件到 weiyongqiang@weiyongqiangcom 我在收到邮件后会回复。
我们在写样式的时候，可能一个app内的颜色，比如#00ff00，假设这个颜色我用了100次，穿插写在不同的页面里。当需要修改这个主题的时候，会让人抓狂。
所以我们可以使用变量来优化。
在html, css里面，它原始的定义方式及使用方法是这样的
其中，:root是根元素选择器，也就是<html>元素。在这里面定义的变量，可以在整个页面进行使用。
使用的时候，用var()函数进行调用。
注意：约定变量名须以两个连字符'--'开头
在小程序中，用法基本也是一样的：
我们在wxss页面中进行定义
注意，page选择器是选中整个页面，前面是没有''号的。这是wxss系统自带的选择器。可以看到，用法和css原始用法差别不大。
你也可以在wxml里面直接使用！
这个wxss变量，既可以在每个页面mypagewxss里面的page里声明，
，就能在所有页面里使用。
小程序的点击事件里，有对应的方法。
bindtouchstart="handleTouchStart" //按下未松开
bindtouchend="handleTouchEnd" //松开
再写出你想要的 *** 作就行了
rem由来 ：font size of the root element，那么rem是个单位，单位大小由它第一代老祖宗的 font-size 的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康，因为不仅要知道rem是个单位，更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB。
事故造成原因：
1px单位在PC上很流行，在手机屏幕上一看，MLGB的，同样的12px却小的跟蚂蚁似的。
2好不容易在iPhone4上调的正常了，换个菊花牌手机，MBD不堪入目了。
3知道了rem的用法，但是html的font-size到底是多少才合适啊啊啊，妈蛋~。
好了，那么现在来解决这些问题。
在解决之前，麻烦各位大婶要了解一些你可能不想了解的东东（警告：不了解这些就不能知道真相哟~）：
1 物理像素(physical pixel)
我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。
2逻辑像素
是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。
3设备的像素比(device pixel ratio)简称DPR
它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：
DPR= 物理像素 / 逻辑像素
那么了解了上面这些概念，就可以知道，为什么css在pc上写着font-size=12px;但是换到手机上却变小了？因为DPR啊啊啊，大哥~。
没错，我们在电脑屏幕上的DPR是1，但是手机却不同，可能是它可能是2，也可能是3。获取设备DPR的方法还是有的：
1在JavaScript中，通过windowdevicePixelRatio来获取
2在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同DPR的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。
本人也在网上看了不少动态设置rem的文章，下面把几个常用的列举出来：
一，用媒体查询来设置html的font-size：
@mediascreen and (min-width:320px) {html{font-size:14px;}} @mediascreen and (min-width:360px) {html{font-size:16px;}} @mediascreen and (min-width:400px) {html{font-size:18px;}} @mediascreen and (min-width:440px) {html{font-size:20px;}} @mediascreen and (min-width:480px) {html{font-size:22px;}} @mediascreen and (min-width:640px) {html{font-size:28px;}}
二、利用js来动态设置
!(function(doc, win){vardocEle = docdocumentElement, evt ="onorientationchange"inwindow"orientationchange":"resize", fn =function(){varwidth = docEleclientWidth; width && (docElestylefontSize =20 (width /320) +"px"); }; winaddEventListener(evt, fn,false); docaddEventListener("DOMContentLoaded", fn,false); }(document,window));
我要说的是最后一种，也是我认为目前比较好的实现方法：
利用js计算当前设备的DPR，动态设置在html标签上，并动态设置html的font-size，利用css的选择器根据DPR来设置不同DPR下的字体大小（这个方法很不错哦~）
!function(win, lib){vartimer, doc = windocument, docElem = docdocumentElement, vpMeta = docquerySelector('meta[name="viewport"]'), flexMeta = docquerySelector('meta[name="flexible"]'), dpr =0, scale =0, flexible = libflexible || (libflexible = {});// 设置了 viewport metaif(vpMeta) {consolewarn("将根据已有的meta标签来设置缩放比例");varinitial = vpMetagetAttribute("content")match(/initial\-scale=([\d\]+)/);if(initial) { scale =parseFloat(initial[1]);// 已设置的 initialScaledpr =parseInt(1/ scale);// 设备像素比 devicePixelRatio} }// 设置了 flexible Metaelseif(flexMeta) {varflexMetaContent = flexMetagetAttribute("content");if(flexMetaContent) {varinitial = flexMetaContentmatch(/initial\-dpr=([\d\]+)/), maximum = flexMetaContentmatch(/maximum\-dpr=([\d\]+)/);if(initial) { dpr =parseFloat(initial[1]); scale =parseFloat((1/ dpr)toFixed(2)); }if(maximum) { dpr =parseFloat(maximum[1]); scale =parseFloat((1/ dpr)toFixed(2)); } } }// viewport 或 flexible// meta 均未设置if(!dpr && !scale) {// QST// 这里的 第一句有什么用 // 和 Android 有毛关系 varu = (winnavigatorappVersionmatch(/android/gi), winnavigatorappVersionmatch(/iphone/gi)), _dpr = windevicePixelRatio;// 所以这里似乎是将所有 Android 设备都设置为 1 了dpr = u ( (_dpr >=3&& (!dpr || dpr >=3)) 3: (_dpr >=2&& (!dpr || dpr >=2)) 2:1) :1; scale =1/ dpr; } docElemsetAttribute("data-dpr", dpr);// 插入 viewport metaif(!vpMeta) { vpMeta = doccreateElement("meta"); vpMetasetAttribute("name","viewport"); vpMetasetAttribute("content","initial-scale="+ scale +", maximum-scale="+ scale +", minimum-scale="+ scale +", user-scalable=no");if(docElemfirstElementChild) { docElemfirstElementChildappendChild(vpMeta) }else{vardiv = doccreateElement("div"); divappendChild(vpMeta); docwrite(divinnerHTML); } }functionsetFontSize(){varwinWidth = docElemgetBoundingClientRect()width;if(winWidth / dpr >540) { (winWidth =540 dpr); }// 根节点 fontSize 根据宽度决定varbaseSize = winWidth /10; docElemstylefontSize = baseSize +"px"; flexiblerem = winrem = baseSize; }// 调整窗口时重置winaddEventListener("resize",function(){ clearTimeout(timer); timer = setTimeout(setFontSize,300); },false);// 这一段是我自己加的// orientationchange 时也需要重算下吧winaddEventListener("orientationchange",function(){ clearTimeout(timer); timer = setTimeout(setFontSize,300); },false);// pageshow// keyword: 倒退 缓存相关winaddEventListener("pageshow",function(e){if(epersisted) { clearTimeout(timer); timer = setTimeout(setFontSize,300); } },false);// 设置基准字体if("complete"=== docreadyState) { docbodystylefontSize =12 dpr +"px"; }else{ docaddEventListener("DOMContentLoaded",function(){ docbodystylefontSize =12 dpr +"px"; },false); } setFontSize(); flexibledpr = windpr = dpr; flexiblerefreshRem = setFontSize; flexiblerem2px =function(d){varc =parseFloat(d) thisrem;if("string"==typeofd && dmatch(/rem$/)) { c +="px"; }returnc; }; flexiblepx2rem =function(d){varc =parseFloat(d) /thisrem;if("string"==typeofd && dmatch(/px$/)) { c +="rem"; }returnc; }}(window,windowlib || (windowlib = {}));
忘了说了，手机淘宝很多页面用的就是这种方法来适配终端的。
老规矩，先上效果图
个人对夜间模式这个功能情有独钟
晚上黑灯瞎火的看手机，屏幕亮度就算调到最低依然很是刺眼呀
所以我一直用某浏览器，因为有夜间模式
言归正传，依然是分析功能点
1点击按钮，切换一套css（这个功能很简单）
2把皮肤设置保存到全局变量，在访问其它页面时也能有效果
3把设置保存到本地，退出应用再进来时，依然加载上次设置的皮肤
先从切换开始吧，switch很少用，还是贴一下吧
按钮功能OK了，现在我们去写样式
像这种黑的风格的皮肤，大背景色用#000
小背景用#333，文字用#999吧，我也懒得用取色器了
既然需要一套皮肤，那我们就去文件夹外面写一个样式文件
就新建一个skin目录，下面写一个darkwxss吧
然后呢
我们把普通模式下的wxss复制一份，贴进来
把和颜色有关的属性留下来，其它删除
像background呀，border，color等。。其它统统不要
最后发现就剩这么点了。。
大家发现，我这些样式名称都有dark-box
这个dark-box就是最外面，也是最大的盒子（除了默认的page哈）
my-box是普通模式，dark-box就是夜间模式
当然你也可以在写一个皮肤样式，黄、红、蓝。。。
现在这个写法，我们只用控制变量 skinStyle的值就能改变皮肤样式了
我们还能写个blue-box的皮肤，然后设置变量为skinStyle为blue就行了
还有关键一步，在wxss文件中把这个皮肤文件引入要显示的页面
接下来第二步，这就简单了。。
设置到全局变量嘛，先getApp(),然后传过去就行了
现在在访问其它页面的时候，dark皮肤也会传进去
我只写了一个页面哈，所以只有这个页面会有变化
现在第三步了，保存到localstroge中
完了吗？并没有。。
我们要在程序打开时就获取皮肤设置
所以要在appjs去get与皮肤相关的信息
现在我们设置黑色皮肤，然后退出，进去之后不是黑色
因为我们在页面加载时没设置
现在再来看看
结果按钮的状态是关闭，皮肤却是开着
因为开关重置了
这个就交给大家自己解决啦，启动时判断一下就OK啦
需要源码的话我再上传吧
以上就是关于小程序wxss如何引入css链接库全部的内容，包括:小程序wxss如何引入css链接库、二、支付宝小程序前端样式的设计.acss样式详解、小程序wxss;css中使用变量等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）