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. c# out ref parames的用法

    out ref parames的用法(将值传递转换成引用传递) Out 一般用于返回多个值,在方法体中会清空out变量,侧重于一个方法有多个返回值得时候使用 Ref有进有出,可以在方法体外必须赋初值, ...

  2. QT多线程简单例子

    在Qt中实现多线程,除了使用全局变量.还可以使用信号/槽机制. 以下例子使用信号/槽机制. 功能: 在主线程A界面上点击按钮,然后对应开起一个线程B.线程B往线程A发送一个字符串,线程A打印出来. 1 ...

  3. Prometheus监控学习笔记之360基于Prometheus的在线服务监控实践

    0x00 初衷 最近参与的几个项目,无一例外对监控都有极强的要求,需要对项目中各组件进行详细监控,如服务端API的请求次数.响应时间.到达率.接口错误率.分布式存储中的集群IOPS.节点在线情况.偏移 ...

  4. 在static的function静态函数中访问成员变量

    class A{ private $url; public function __construct(){ $this->url = $_SERVER['PATCH_INFO']; } publ ...

  5. 2、pandas的value_counts()和describe()

    一.value_counts pandas 的value_counts()函数可以对Series里面的每个值进行计数并且排序. value_counts是计数,统计所有非零元素的个数,默认以降序的方式 ...

  6. 批处理no.bat

    在公司每次我启动电脑, 网络连接需要一段时间, 而我想在这段小时间里面, 一旦网络连接成功就帮我启动微信和qq, 如果还没有连接成功就继续监测直到有网络了才会成功才会打开两个程序, 当打开程序后脚本自 ...

  7. Codeforces 844D Interactive LowerBound - 随机化

    This is an interactive problem. You are given a sorted in increasing order singly linked list. You s ...

  8. 【Python028--引入文件】

    一.打开文件 1.open()函数 打开模式 执行操作 ‘r’ 以只读方式打开文件(默认) ‘w’ 以写入的方式打开文件,会覆盖已存在的文件 ‘x’     如果文件已经存在,使用此模式打开将引发异常 ...

  9. 网络 --- 1 c/s （b/s）架构 ip 初始socket

    一.c/s   b/s c/s架构:客户端(client)/服务器(server) 软件cs架构:微信,陌陌,qq等 硬件cs架构:打印机 b/s架构:浏览器(browser)/服务器(server) ...

  10. python---01.各类计算机语言,python历史,变量,常量,数据类型,if条件

    一.认识计算机 1.硬件组成: CPU(大脑)  + 内存(缓冲) + 主板(连接各部分) + 电源(心脏)      + 显示器 + 键盘 +鼠标+ 显卡 + 硬盘 2.操作系统 ①windows  ...