美橙互联建站网站被截止,徐州网站建站,临淄网站推广,四川招投标网#x1f48c; 所属专栏#xff1a;【微信小程序开发教程】 #x1f600; 作 者#xff1a;我是夜阑的狗#x1f436; #x1f680; 个人简介#xff1a;一个正在努力学技术的CV工程师#xff0c;专注基础和实战分享 #xff0c;欢迎咨询#xff01; … 所属专栏【微信小程序开发教程】 作 者我是夜阑的狗 个人简介一个正在努力学技术的CV工程师专注基础和实战分享 欢迎咨询 欢迎大家这里是CSDN我总结知识的地方喜欢的话请三连有问题请私信 文章目录前言一、WXSS 模板样式1、什么是 WXSS2、 WXSS 和 CSS 的联系二、rpx1、rpx 尺寸单位2、实现原理3、rpx 与 px 之间的单位换算三、样式导入1、样式导入是什么2、import 的语法格式总结前言 大家好又见面了我是夜阑的狗本文是专栏【微信小程序开发教程】专栏的第13篇文章; 今天开始学习微信小程序的第八天开启新的征程记录最美好的时刻每天进步一点点。 专栏地址【微信小程序开发教程】 此专栏是我是夜阑的狗微信小程序开发过程的总结希望能够加深自己的印象以及帮助到其他的小伙伴。 如果文章有什么需要改进的地方还请大佬不吝赐教。 一、WXSS 模板样式 前面已经介绍完了WXML模板语法通过栗子学习了WXML模板语法数据绑定、条件渲染和列表渲染。接下来就来讲解一下另外一个模板样式–WXSS。话不多说让我们原文再续书接上回吧。 1、什么是 WXSS WXSS (WeiXin Style Sheets)是一套样式语言用于美化 WXML 的组件样式类似于网页开发中的 CSS。
2、 WXSS 和 CSS 的联系 WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序WXSS 对 CSS 进行了扩充以及修改。 与 CSS 相比WXSS 扩展的特性有
rpx 尺寸单位import 样式导入 二、rpx
1、rpx 尺寸单位 rpxresponsive pixel是微信小程序独有的用来解决屏适配的尺寸单位。
2、实现原理 rpx 的实现原理非常简单鉴于不同设备屏幕的大小不同为了实现屏幕的自动适配rpx 把所有设备的屏幕 在宽度上等分为 750 份即当前屏幕的总宽度为 750rpx 。 在较小的设备上1rpx 所代表的宽度较小。 在较大的设备上1rpx 所代表的宽度较大。 小程序在不同设备上运行的时候会自动把 rpx 的样式单位换算成对应的像素单位来渲染从而实现屏幕适配。
3、rpx 与 px 之间的单位换算 在 iPhone6 上屏幕宽度为375px共有 750 个物理像素等分为 750 rpx。则 {750rpx375px750物理像素1rpx0.5px1物理像素\begin{cases} 750 \ rpx 375 \ px 750 \ 物理像素 \\ 1 \ rpx 0.5 \ px 1 \ 物理像素 \\ \end{cases} {750 rpx375 px750 物理像素1 rpx0.5 px1 物理像素
设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)iPhone51rpx 0.42px1px 2.34rpx iPhone6 1rpx 0.5px1px 2rpxiPhone6 Plus1rpx 0.552px1px 1.81rpx官方建议 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。例如在 iPhone6 上如果要绘制宽100px高20px的盒子换算成rpx单位宽高分别为 200rpx 和 40rpx。 注 意 在较小的屏幕上不可避免的会有一些毛刺请在开发时尽量避免这种情况。
三、样式导入
1、样式导入是什么 在实际开发过程中可以把多个页面使用相同的样式抽离成一个公共的样式这样简化整体代码使整个工程更加简洁。通过使用 WXSS 提供的 import 语法可以导入外联的样式表。 2、import 的语法格式 import 后跟需要导入的外联样式表的相对路径用 ; 表示语句结束。具体代码如下
common.wxss 定义公共样式。
.usercsh {color: green;
}cshPageTab.wxss 导入公共样式并进行调用。
import /common/common.wxss;cshPageTab.wxml 公共样式进行调用。
view wx:for{{userList}} wx:keyid classusercsh{{item.name}}/view此时就完成了样式的导入和调用可以来看一下字体颜色是否改变 总结 感谢观看这里就是常用的视图容器类组件的介绍使用如果觉得有帮助请给文章点个赞吧让更多的人看到。 也欢迎你关注我。 原创不易还希望各位大佬支持一下你们的点赞、收藏和留言对我真的很重要 最后本文仍有许多不足之处欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正下期再见。 更多专栏订阅: 【LeetCode题解持续更新中】 【Java Web项目构建过程】 【微信小程序开发教程】⚽ 【JavaScript随手笔记】 【大数据学习笔记华为云】 【程序错误解决方法建议收藏】 【软件安装教程】 订阅更多你们将会看到更多的优质内容
