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. redis的常用命令01

    启动redis的命令: redis-server redis.windows.conf把redis设置成windows下的服务的命令:输入命令后刷新会出现redis的服务:redis-server - ...

  2. codevs——1003——电话连线

    题目描述 Description 一个国家有n个城市.若干个城市之间有电话线连接,现在要增加m条电话线(电话线当然是双向的了),使得任意两个城市之间都直接或间接经过其他城市有电话线连接,你的程序应该能 ...

  3. AdminLTE模板使用

    AdminLTE介绍: AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具,它提供了一系列响应的,可重复使用的组件,并内置了多个模板页面;同时自适应多种屏幕分辨率,兼 ...

  4. Fiddler（二）Fiddler操作界面[工具条]和[底部状态面板]说明

    工具条说明 下面从左往右介绍一下每个按钮在工作中能起到什么作用,我这里是汉化版,所以顾名思义大家也能大概明白,并且鼠标在对应的图标上停留会有官方解释.下面再稍微补充一下 从第二个按钮说起,也就是小气泡 ...

  5. bzoj2120 / P1903 [国家集训队]数颜色 / 维护队列（带修改莫队）

    P1903 [国家集训队]数颜色 / 维护队列 带修改的莫队 在原有指针$(l,r)$上又添加了时间指针$t$ 贴一段dalao的解释 带修改的莫队,和原版莫队相比,多了一个时间轴 原版莫队是将区间( ...

  6. 《2015 html5 iweb 峰会观会后感》

    今天是2015  html5 iweb 峰会,大会在早上8:30,就开始了,没想到被坑了,看错一个字,把"国际会议中心",看成了"国家会议中心".大约过了10多 ...

  7. oracle 11g AUTO_SAMPLE_SIZE动态采用工作机制

    Note that if you're interested in learning about Oracle Database 12c, there's an updated version of ...

  8. 看起来像是break的考量

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

  9. metasploit(MSF)对windows的ms17-010漏洞利用

    picture 配置exploit msf > use exploit/windows/smb/ms17_010_eternalblue msf exploit(windows/smb/ms17 ...

  10. Black Hat Python3 Chapter4

    mail sniffer 现在的邮箱应用我能找到的都是加密传输了,因此相像书中那样直接从抓到的包里获取到用户名和密码信息除非是自己专门搭建一个邮箱服务器,不然很难做到,为了便于理解代码的运行,多添加一 ...