ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

WXSS——样式(6)

2021-10-16 16:02:56  阅读:183  来源: 互联网

标签:11 wxss 样式 font color WXSS size


1.尺寸单位

rpx(respective pixel):小程序独有的尺寸单位,规定屏幕宽为750rpx。
可根据屏幕自适应大小
比如,当屏幕宽度为 375px (像素),则 750rpx = 375px = 750物理像素 , 1rpx = 0.5px

2.数据类型

WXS 语言目前共有以下几种数据类型:

number数值
string字符串
boolean布尔值
object对象
function函数
rray数组
date日期
regexp正则

3.样式

小程序中,不需要主动引入样式文件

当单位为像素,改变手机的大小,样式大小不会变化,不会自适应改变大小
view{
  width: 200px;
  height: 200px;
  font-size: 40px;//字体大小
  background-color: aqua;//背景颜色
}
想要让样式自适应手机屏幕大小,需要把单位改为rpx

4.样式导入

wxss中支持样式导⼊
也可以和 less中的导⼊混⽤。
使⽤ @import 语句可以导⼊样式,但⽀持相对路径
新建一个样式文件styles/common.wxss
在这里插入图片描述
添加样式:

view{
  color: aqua;
  font-size: 100px;
}

然后在想要使用这个样式的页面的wxss中导入样式文件

@import "../../styles/common.wxss"//必须是相对路径

此时,view的标签内容样式发生改变
在这里插入图片描述

5.选择器

在小程序中,通配符*失效,其他和css一样
在这里插入图片描述
部分样式用法如下:
wxss

.first{
  color: aquamarine;
  font-size: 50px;
}
#second{
  color: red;
  font-size: 20px;
}
view{
  color: aqua;
  font-size: 100px;
}
text,checkbox{
  color: black;
  font-size: 66px;
}

wxml

<view>11</view>
<view class="first">11</view>
<view id="second">11</view>
<text>11</text>

在这里插入图片描述

标签:11,wxss,样式,font,color,WXSS,size
来源: https://blog.csdn.net/qq_42424228/article/details/120783187

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有