image
这是666计划的第44篇
继续极客时间9小时微信小程序系列笔记。
image
wxss就是Weisin Style Sheet的缩写， 对标html的css
尺寸单位rpx
先了解下像素
image
设备像素
设备能控制显示的最小物理单位， 这些点是屏幕上固定不变的。
css像素
web编码中的逻辑像素
PPI/DPI
每英寸拥有的像素数目， 数值越高显示屏能以越高的密度显示图像。
PPI计算公式：
image
DPR
在某一个方向上， 设备像素和css像素之比。
补充： css中单位 px、em、rem区别
国内喜欢用px多， 国外网站大多喜欢用em和rem
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的.
PX特点：
-
IE无法调整那些使用px作为单位的字体大小；
-
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
-
Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px,
这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
EM特点 ：
-
em的值并不是固定的；
-
em会继承父级元素的字体大小。
rem特点 ：
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是
p {font-size:14px; font-size:.875rem;}
px,em,rem单位转换工具:
rpx:
WXSS不能直接操作html的样式属性， rem的适配方案就失效了， 微信团队推出了rpx。
规定： 屏幕的宽度是750rpx， 从而可以实现屏幕自适应。 其实现原理和rem很相似。并且， 最终rpx也是转换成了rem
外联样式导入
多个不同的页面需要共用同一个样式，可以用@import来导入。
index.wxml:
<view class='container'>
hello world with container.
</view>
index.wxss:
@import './assets.wxss';
.container {
color: red;
}
assets.wxss:
.container {
border: 1px solid #000;
}
效果：
image
内联样式
通过style关键字属性实现内联样式：
index.wxml:
<view style='width:500rpx;height:30px;background-color:{{colorValue}};'>
hello world with inner style
</view>
index.js:
Page({
data: {
colorValue: 'green'
}
})
效果：
image
结论： 把静态的样式写入class， 动态的内容写入data中。
选择器
目前支持的选择器有：
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .class | .intro | 选择所有class="intro"的组件 |
| #id | #firstname | 选择所有id=“firstname"的组件 |
| element | view | 选择所有view组件 |
| element,element | view, checkbox | 选择所有文档的view组件和所有的checkbox组件 |
| ::after | view::after | 在view组件后边插入内容 |
| ::before | view::before | 在view组件前边插入内容 |
选择器的优先级：
image
即 !important > 内联样式 > id > class > element
使用!important的场景：
比如使用小程序插件的时候， 除了直接修改源代码， 还可以用!important覆盖原来的设置。
比如： index.wxss
.title {
color:red !important;
}
wxml是表现， wxss是样式， 如何让二者互动起来呢？ 借助JavaScript。
hongjun
网友评论