WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

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 作为视觉稿的标准。

有了rpx，开发的时候，就以750作为标准。

不同的尺寸的手机，自动伸缩。

审美以iPhone6作为基准。

wxss与rpx的更多相关文章

  1. 关于微信小程序的一些总结

    mpvue? {{}} 在vue和小程序中的区别? 01 小程序中{{}}和vue中的{{}}用法基本一致,可以显示data中的数据,可以写表达式 不一样的地方? 01 小程序的{{}}可以写在属性中 ...

  2. 微信小程序新单位rpx与自适应布局

    rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我 ...

  3. 微信小程序-WXSS

    WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. WXSS 用来决定 WXML 的组件应该怎么显示. 为了适应广大的前端开发者,我们的 WXSS 具有 ...

  4. 微信小程序----wxss设置样式

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

  5. 小程序2-基本架构讲解(一)WXSS样式

    项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件 WXSS 样 ...

  6. 微信小程序--代码构成---WXSS 样式

    WXSS 样式 WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改. 新增了尺寸单位.在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一 ...

  7. 小程序基础知识点讲解-WXML + WXSS + JS，生命周期

    小程序基础 小程序官方地址,小程序开发者工具,点击此处下载.在微信小程序中有一个配置文件project.config.json,此文件可以让开发者在不同设备中进行开发. 微信小程序共支持5种文件,wx ...

  8. 小程序WXSS布局

    1. 尽量采用flex 布局,指定flex-direction是row( 从左到右)还是column (从上到下) 特别要记得写 flex-wrap: wrap; 不然超出屏幕部分不会换行 displ ...

  9. wxss解析

    一.概述 wxss是样式语言,用于描述wxml组件样式: 在css基础上扩展而来: 1.尺寸单位: rpx, rem 2.支持样式导入 @import语句导入外联样式表 note:  微信小程序一般使 ...

随机推荐

  1. 每日linux命令学习-引用符号（反斜杠\，单引号''，双引号""）

    引用符号在解析器中保护特殊元字符和参数扩展,其使用方法有3种:反斜杠(\),单引号(’‘),双引号(“”). 单引号和双引号必须匹配使用,均可在解析器中保护特殊元字符和通配符,但是单引号(硬转义)主要 ...

  2. Docker学习笔记之使用 Docker Compose 管理容器

    0x00 概述 通过之前的介绍,我们已经基本掌握了构建.运行容器的方法,但这还远远不够,由于 Docker 采用轻量级容器的设计,每个容器一般只运行一个软件,而目前绝大多数应用系统都绝不是一个软件所能 ...

  3. Kafka学习笔记之为什么使用Kafka

    在介绍为什么使用kafka之前,我们有必要来了解一下什么是kafka? 0x00 什么是kafka Kafka是由LinkedIn开发的一个分布式的消息系统,使用Scala编写,它以可水平扩展和高吞吐 ...

  4. git-tag 标签相关操作

    标签可以针对某一时间点的版本做标记,常用于版本发布. 列出标签 $ git tag # 在控制台打印出当前仓库的所有标签$ git tag -l ‘v0.1.*’ # 搜索符合模式的标签 打标签 gi ...

  5. 查看Linux服务器是否是虚拟机

    dmidecode -s system-product-name 物理机: [root@swnode1]# dmidecode -s system-product-name I840-GS 虚拟机: ...

  6. XcodeProj，使用Ruby更改工程文件

    利用xcodeproj修改xcode工程文件 一,Ruby基础 Ruby迭代器each.map.collect.inject each——连续访问集合的所有元素collect—-从集合中获得各个元素传 ...

  7. iOS Xcode Error 集锦

    一),'libxml/tree.h' file not found Solution: 1.  导入libxml2.dylib 包 2.设置Header Search Paths 为 /usr/inc ...

  8. CSS的进一步深入（更新中···）

    在之前我们学了6种选择器和三种CSS样式的引入,学习选择器就是为了更好的选择文本,学习CSS的引入是为了使文本增加各种样式和属性, 下面我们简单来学习一下为文本加样式和一些属性和属性值: 1.文本的样 ...

  9. 编译openwrt时总是报错“staging_dir/target-aarch64_generic_glibc/stam$/.tools_compile_yynyyyyynyyyyynyynnyyyynyyyyyyyyyyyyyyynyynynnyyynny' failed”

    1. 详细错误如下: tools/Makefile:146: recipe for target '/home/jello/openwrt/staging_dir/target-aarch64_gen ...

  10. 如何安装整个linux系统中所需要的mp3播放库插件? 可以在安装rpmfusion仓库后直接通过dnf install进行按照就可以了

    在vi的界面中, 前面的数字, 表示一行. 而对于中文而言, 并不一定是"一个文本行"就是一行, 而是以 回车(硬回车)为标志, 来判定一行的. 而dd, yy等也是以" ...