第6章 WXSS样式处理-【千锋教育】微信小程序开发与实战（微课版）

第6章 WXSS样式处理 WXSS尺寸单位 WXSS样式导入 WXSS选择器 WXSS布局 01 02 04 03 目 录 CATALOUGUE 初心至善 匠心育人 WXSS尺寸单位 初心至善 匠心育人 WXSS尺寸单位 rpx（全称 responsive pixel）单位在渲染过程中可以根据屏幕宽度进行自适应，会将rpx按比例换算成px，WXSS规定屏幕宽度为750px。例如在iPhone6中，屏幕宽度为375px，共有750个物理像素，换算成rpx就是750rpx = 375px，由此可以得出，在iPhone6中1rpx = 0.5px = 1物理像素。 初心至善 匠心育人 WXSS尺寸单位 设备 rpx换算px(屏幕宽度/750) rpx换算px(750/屏幕宽度) iPhone5 1rpx = 0.42px 1px = 2.34rpx iPhone6 1rpx = 0.5px 1px = 2rpx iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx 初心至善 匠心育人 WXSS尺寸单位 rem（全称 root em）单位与rpx的用法类似，WXSS规定屏幕为20rem，我们还以iPhone6为例。iPhone6的屏幕宽度为375px，换算成rem就是20rem = 375px，由此得出，在iPhone6中1rem = 18.75px。 初心至善 匠心育人 WXSS尺寸单位 设备 rpx换算px (屏幕宽度/750) rpx换算px (750/屏幕宽度) rem换算px (屏幕宽度/20) px换算rem (20/屏幕宽度) iPhone5 1rpx = 0.42px 1px = 2.34rpx 1rem = 15.75px 1px ≈ 0.0635rem iPhone6 1rpx = 0.5px 1px = 2rpx 1rem = 18.75px 1px = 0.053rem iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx 1rem = 20.7px 1px ≈ 0.048rem 初心至善 匠心育人 WXSS选择器 初心至善 匠心育人 WXSS选择器 CSS选择器用于选择需要添加样式的页面元素，WXSS对CSS选择器属性也做了部分兼容。在WXSS中实现了CSS的部分选择器，其规则也和CSS一样，如果对CSS比较熟悉的话，可以快速掌握WXSS选择器的使用。 初心至善 匠心育人 WXSS选择器 选择器 样例 描述 .class .content 选择所有拥有 class=”content” 的组件 #id #demo 选择拥有 id=”demo” 的组件 element view 选择所有 view 组件 element, element view, checkbox 选择所有文档的 view 和 checkbox 组件 ::after view::after 在 view 组件后边插入内容 ::before view::before 在 view 组件前边插入内容 初心至善 匠心育人 WXSS选择器 CSS选择器语法： 选择器 { 样式属性: 属性值; 样式属性: 属性值; } 初心至善 匠心育人 WXSS样式导入 初心至善 匠心育人 WXSS样式导入 在小程序中，每个组件上都有一个style的公共属性，用于设置组件的样式。组件上的style属性定义的样式会在小程序运行时被解析，如果是非必要的情况，不建议直接将样式定义在组件的style属性中，这会影响页面渲染速度。 初心至善 匠心育人 WXSS样式导入 内联样式示例代码： // index.wxml <view class="body"> <view class="title">标题</view> <view class="line-item">第1行内容；</view> <view class="line-item">第2行内容；</view> <view style="font-size: 30rpx;font-weight: bold;">第3行内容；</view> </view> // index.wxss .body { border: 1px solid #000; height: 30%; text-align: center; } .title { font-size: 40rpx; font-weight: 600; } .line-item { font-size: 30rpx; line-height: 80rpx; } 初心至善 匠心育人 WXSS样式导入 在实际项目