web前端全系列 教程
1839个小节阅读:2244.2k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
在项目根目录的 app.wxss
文件为小程序公的共样式表,相当与CSS初始化文件配置
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式
WXSS 用来决定 WXML 的组件应该怎么显示
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比,WXSS 扩展的特性有
在 app.wxss
文件中添加样式
xxxxxxxxxx
text{
color:red;
}
项目中所有的页面的 text
文本都会呈现红色
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素
设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
---|---|---|
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况
在news
页面的wxml
文件中增加下列代码
xxxxxxxxxx
<view class="box"></view>
在 app.wxss
文件中,增加box
盒子的样式
xxxxxxxxxx
.box{
width: 200rpx;
height: 200rpx;
background: red;
}
在iphone5上的效果,元素的宽高是85px
在iphone6上的效果,元素的宽高是100px
使用@import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;
表示语句结束
在项目根目录下创建common
文件夹,并创建common.wxss
文件,增加box
的样式
xxxxxxxxxx
.box{
margin: 50px;
}
在app.wxss
文件中引入common.wxss
文件
xxxxxxxxxx
@import "./common/common.wxss";
此时,刚刚所创建的box
也加载了引入文件的样式
实时效果反馈
1. 在微信小程序中,可以根据屏幕宽度进行自适应大小的单位是:
A px
B rpx
C pc
D vw
答案
1=>B