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. 使用Ajax出现302 Moved Temporarily

    现象:在用ajax发送请求时,各种参数都对,地址也对,一直进error返回parse error. 使用浏览器发现ajax请求的header的响应码处:302 Moved Temporarily 百度 ...

  2. 如何使用 lsyncd 实时同步并执行 shell 命令

    修改 lsyncd 的默认配置,不直接执行rsync 进行同步,而是改用自己的脚本. binary 指定我们的脚本 vim /usr/local/lsyncd/etc/lsyncd.conf sett ...

  3. shell 脚本的时间差计算

    在某个时间点上增加一段时间 将时间转为时间戳,然后增加时间 [root@~]# date +%s -d '2017-05-27 12:0:0' 1495857600 [root@ ~]# new_ti ...

  4. Windbg解决系统蓝屏

    win10企业版连续两天遭遇系统蓝屏, 今天就各种检查,准备好好地研究一下这个问题,以下是整个过程: 首先,找到系统蓝屏时的错误日志: [计算机] --> [管理] --> [系统工具] ...

  5. daemon进程fork一次和fork两次的区别？

    守护进程也称为精灵进程(Daemon),是运行在后台的一种特殊的进程.它独立于控制终端并且周期性的执行某种任务负等待处理某些发生的事件.因为他们没有控制终端,所以说他们是在后台运行的. 守护进程的特点 ...

  6. TCP 之 RST 原因分析

    5. 往一个对端已经关闭的套接字上写入数据会收到一个RST信号 1.发送端的 发送缓冲区还有数据,但接收端tcp的接收通道已关闭 2. SYN到达某端口但此端口上没有正在监听的服务器.对于UDP,当一 ...

  7. 从技术专家到管理者的思路转变（V1）

    作为技术专家出身的管理者,是一种优势(你所做的很多决策可能比非技术出身的管理者更加具有可行性和性价比).也是一种劣势(你可能会过于自恋自己的技术优势).这取决于你在接下去的职业生涯中,如何取舍你的技术 ...

  8. devexpress 之 ChartControl

    \}5#~mV#cr(/k1yIZ7.Lg

  9. 看起来像是break的考量

    代码运用了if+break: package day20181008; import java.util.Scanner; public class ZuoYe01 { public static v ...

  10. python简说（二十七）sys.argv

    sys.argv,是获取到运行python文件的时候传入的参数 可以在pycharm中点击 if len(sys.argv)>1: if sys.argv[1]=='--help': quit( ...