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. 使用隐含参数testMappingSpeed排查GoldenGate抽取慢的步骤

    OGG经典抽取模式读取redo慢的检查步骤,可以采用以下几个步骤来排查. 步骤一,确认是否抽取进程的写入有问题 1. 在原有抽取进程上,执行如下命令,统计抽取进程的效率 GGSCI> stats ...

  2. P2617 Dynamic Rankings（树状数组套主席树）

    P2617 Dynamic Rankings 单点修改,区间查询第k大 当然是无脑树套树了~ 树状数组套主席树就好辣 #include<iostream> #include<cstd ...

  3. 应使用sqlplus代替tnsping进行oracle连通性测试

    一直以来,都习惯于tnsping alias测试确定使用了那个sqlnet.ora,并测试连通性.最近在制作系统的安装包,为了轻量级以及提高实施效率,全部客户端使用oracle instant cli ...

  4. MySql概念（二）

    一.Sql规范? sql是Structured Query Language(结构化查询语言)的缩写.SQL是专为数据库而建立的操作命令集,是一种功能齐全的数据库语言. 在使用它时,只需要发出“做什么 ...

  5. nagios监控oracle 表空间

    oracle表空间满的危害以及处理方式见我的博客链接https://www.cnblogs.com/-abm/p/9764803.html 除此之外我们还需要对表空间实时监控,这样就可以及时了解表空间 ...

  6. 辅助模块：udp_sweep

    辅助模块:udp_sweep 模块介绍 使用udp对指定IP地址主机进行udp扫描 实践过程 利用该模块填写目的IP来对目的IP地址进行扫描 从结果可以看到扫描结果显示扫描过程放出了13个探针,发现了 ...

  7. Provinces of China

    https://en.wikipedia.org/wiki/Provinces_of_China#Province

  8. Python3 tkinter基础 Canvas background 创建白色的画布 create_line width 画宽的线

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. A>B等CSS选择器

    这些是CSS3特有的选择器,A>B 表示选择A元素的所有子B元素.与A B的区别在于,A B选择所有后代元素,而A>B只选择一代.另外:没有<的用法. A+B表示HTML中紧随A的B ...

  10. 配置vim

    VundleVuldle是一个全自动的插件管理器,让我们通过维护插件列表的方式管理插件.它为安装.更新.删除插件提供了方便的命令.在安装Git的情况下(本文不赘述Git的安装),输入命令: git c ...