微信小程序学习day02-WXSS 模板样式
目录
WXSS 模板样式-介绍:
1. 什么是 WXSS:
2. WXSS 和 CSS 的关系:
WXSS 模板样式 - rpx :
2. rpx 的实现原理:
3. rpx 与 px 之间的单位换算*:
WXSS 模板样式 - 样式导入 :
1. 什么是样式导入:
2. @import 的语法格式:
WXSS 模板样式 - 全局样式和局部样式:
1. 全局样式:
2. 局部样式:
WXSS 模板样式-介绍:
1. 什么是 WXSS:
WXSS (WeiXin Style Sheets)是一套样式语言,用于美化 WXML 的组件样式,类似于网页开发中的 CSS。
2. WXSS 和 CSS 的关系:
WXSS 具有 CSS 大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序的开发。
与 CSS 相比,WXSS 扩展的特性有:
2: @import 样式导入
WXSS 模板样式 - rpx :
1. 什么是 rpx 尺寸单位:
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。
2. rpx 的实现原理:
rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕,在宽度上等分为 750 份(即:当前屏幕的总宽度为 750rpx)。
小程序在不同设备上运行的时候,会自动把 rpx 的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配.
3. rpx 与 px 之间的单位换算*:
在 iPhone6 上,屏幕宽度为375px,共有 750 个物理像素,等分为 750rpx。则:
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 作为视觉稿的标准。
开发举例:在 iPhone6 上如果要绘制宽100px,高20px的盒子,换算成rpx单位,宽高分别为 200rpx 和 40rpx。
WXSS 模板样式 - 样式导入 :
1. 什么是样式导入:
使用 WXSS 提供的 @import 语法,可以导入外联的样式表。
2. @import 的语法格式:
@import 后跟需要导入的外联样式表的相对路径,用 ; 表示语句结束。示例如下:
WXSS 模板样式 - 全局样式和局部样式:
1. 全局样式:
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。
2. 局部样式:
在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面。
注意:
微信小程序学习day02-WXSS 模板样式相关推荐
- 微信小程序3(WXSS模板样式和全局局部配置)
WXSS模板样式 WXSS模板样式-rpx rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位 实现原理' 鉴于不同设备的屏幕大小不同,为了实现屏幕的自动适配,rp ...
- 微信小程序开发之WXSS模板样式与WXS脚本语言
目录 一.WXSS (1)rpx尺寸单位 (2)样式导入 (3)全局样式与局部样式 (4)常用样式 二.WXS (1)概念 (2)应用场景 (3)WXS与JavaScript的关系 (4)基本用法 内 ...
- 微信小程序学习笔记(二)模板与配置
文章目录 1. WXML 模板语法 1.1 数据绑定 1.1.1 数据绑定的基本原则 1.1.2 在 data 中定义页面的数据 1.1.3 Mustache 语法的格式 1.1.4 Mustache ...
- 微信小程序学习笔记——wxss使view填充整个页面
在页面中我们要将某个元素填充整个页面,使用height:100%,前提是给定父元素的高度,在普通的html中可以将body或者html的高度赋值为100%,接下开才可以在其中的子元素使用height: ...
- 微信小程序学习3(wxss)
1.id与class选择器 选择器就是wxss大括号前面的部分,id选择器样式为( #id ),class选择器样式为( .class名 ) 区别:class可以重复使用,即wxml中多个组件可以有相 ...
- 微信小程序学习之Template模板开发
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用.使用 name 属性,作为模板的名字.然后在 <template/> 内定义代码片段,使用 is 属性 ...
- 微信小程序学习2:开发工具快速创建页面(pages)的四个文件(.js,.json,.wxml, .wxss)
微信小程序学习2:开发工具快速创建页面(pages)的四个文件(.js,.json,.wxml, .wxss) [1]首先在pages文件夹下创建一个页面文件夹,比如我打算创建个人中心,我创建一个ho ...
- 微信小程序学习笔记(1)
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构 当开发者新建一个工程时,项目文件包 ...
- 微信小程序学习(1)-基础开发
学习微信小程序 微信小程序学习(1) 微信小程序学习(2) 文章目录 学习微信小程序 注册和初始化 小程序配置 tabbar导航栏 模板插样与WXML 循环渲染 条件渲染 模板 微信小程序脚本WXS ...
- 微信小程序学习记录【1】【项目结构构成、官方文档构成、基本配置】
微信小程序学习记录[1][项目结构构成.基本配置]文章目录 项目结构构成 官方文档结构 基本配置 1. 小程序配置 1.1 app.json 1.2 page(页面名).json 1.3 sitema ...
最新文章
- 计算机专业人事制度改革,清华大学计算机系人事制度改革正式启动-清华大学新闻网...
- asyncdata连接php,如何使用Nuxt和asyncData观察路由更改
- python图形编程复选按钮和单选按钮详细说明_Python_tkinter_单选框(Radiobutton)与复选框(Checkbutton)...
- 为 pom.xml 添加组织,法律和开发人员信息
- 分布式、云原生技术之后,分布式云或成数字化转型新利器
- MySQL 基础 ———— SQL语句的执行顺序与 LIMIT 子句
- LeetCode - Maximum Subarray
- vmware-安装vmware tools教程190915
- sqlserver 2008r2 执行代码 快捷键
- 世界大学生超算竞赛正式启动,再次引发全球关注
- Python爬虫之(二)工具的使用
- RTMP/RTSP直播播放器的几种选择
- 蓝芯保护卡_蓝芯防毒卡无忧版
- 入职美团定级P7,最新最全180道高级岗面试题及答案
- 电脑卸载了bandzip,但是在文件的打开方式里面还是有bandzip,注册表里又搜不到相关文件,如何解决?
- emacs go-mode 设置tab宽度
- 线性代数(1)—— 行列式
- java调用kettle自定义kettle.properties配置文件路径
- css样式内联式,外联式,嵌入式
- Linux命令之less