微信小程序(WXSS样式文件)

£可爱£侵袭症+ 提交于 2019-11-27 15:44:17

(1)WXSS简介
简介:
WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。

小程序中的样式文件一共分为两个级别/两类:
提供了全局的样式(app.wxss )局部样式(page.wxss)

注意:WXSS 仅支持部分 CSS 选择器

WXSS与 CSS相比???
尺寸单位
样式导入

(2)WXSS尺寸单位
目的:引用新尺寸单位的目的是,适配不同宽度的屏幕,开发起来更简单。
在这里插入图片描述

(3)WXSS样式导入
微信小程序使用@import语句导入外联样式表
①定义公共样式
在这里插入图片描述
②导入
在这里插入图片描述
③结果
在这里插入图片描述
(4)WXSS选择器
在这里插入图片描述
(5)开发工具设置
(1)上传代码时自动补全
小程序要求兼容到iOS8以下版本,需要开启样式自动补全,在“设置”—“项目设置”—勾选“上传代码时样式自动补全”。
(2)不校验合法域名
设置完毕后,在微信开发者工具中,就可以随意访问了。此时便可以使用 http://localhost:12345/这种既不带 https的安全链接地址。

总结

(1)尺寸单位rpx
(2)样式导入@import
(3)内联样式style
(4)全局样式与局部样式(局部会覆盖全局)

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!