微信小程序尺寸单位rpx和样式使用详解

 

一：尺寸单位rpx和样式使用详解

1.尺寸单位 
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上屏幕宽度为375px共有750个物理像素关键词筛选步骤共有750个物理像素则750rpx = 375px = 750物理像素1rpx = 0.5px = 1物理像素。 

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 

 

@import "common.wxss";

@import "temp/loadBottomTemp/loadBottomTemp.wxss";

3.内联样式  框架组件上支持使用 style、class 属性来控制组件的样式。  (1)style：静态的样式统一写到 class 中。style 接收动态的样式在运行时会进行解析请尽量避免将静态的样式写进 style 中以免影响渲染速度。

 

//动态样式

<view />

style="width:{{imageWidth}}rpx;height:{{imageHeight}}rpx";

//静态样式

style="color: #1083E5;font-size: 48rpx;font-weight:bold;"

(2)class：用于指定样式规则其属性值是样式规则中类选择器名(样式类名)的集合样式类名不需要带上.样式类名之间用空格分隔。

 

<view class="normal_view" />

class="container-row buydes-center-des-select"

4.选择器  目前支持的选择器有： 

5.全局样式与局部样式  定义在 app.wxss 中的样式为全局样式作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式只作用在对应的页面并会覆盖 app.wxss 中相同的选择器。

 

二：设备物理像素(设备像素) 设备逻辑像素(设备独立像素) 代码CSS像素 设备像素比 viewport深入理解

1.viewport(可视区域大小)的概念理解和知识积累  (1)移动设备上的viewport就是设备的屏幕上能用来显示网页的那一块区域,就是浏览器上用来显示网页的那部分区域  (2)viewport不一定是浏览器或者设备屏幕可视区域的大小,可能比可视区域大,也可能比可视区域小,因为viewport的大小是可以设置的  (3)大部分移动设备默认的viewport都是980px,多数情况下要大于device-width,因此一般都要在移动端重置viewport,让width=device-width  (4)通过JavaScript获取viewport的方式：document.documentElement.clientWidth,获取device-width的方式window.innerWidth,获取设备像素比window.devicePixelRatio  (5)苹果从iPhone4开始引进了Retina屏幕,一个CSS像素可以表示多个物理像素,并且在页面缩放到其他比例时候,也可以做到CSS 的1px表示多个device pixels  (6)前端开发中的CSS pixels和设备分辨率所讲的resolution pixels 无关,开发中的CSS pixels和设备像素比有关  viewport的深入理解:点击打开链接

2.移动端的HTML5开发META的常用设置

 

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

<meta content="yes" name="apple-mobile-web-app-capable">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta content="telephone=no" name="format-detection">

第一个meta标签表示：强制让文档的宽度(viewport宽度)与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览；  width - viewport的宽度 height - viewport的高度 [device-width(设备的物理像素宽) | pixel_value] pixel_value是具体的像素值  案例:

 

<meta content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

initial-scale - 初始的缩放比例  minimum-scale - 允许用户缩放到的最小比例  maximum-scale - 允许用户缩放到的最大比例  user-scalable - 用户是否可以手动缩放,这里有的资料写成no有的写成0  第二个meta标签是iphone设备中的safari私有meta标签,它表示：允许全屏模式浏览；  第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式；  在web app应用下状态条（屏幕顶部条）的颜色；  默认值为default（白色）,可以定为black（黑色）和black-translucent（灰色半透明）。  注意：若值为“black-translucent”将会占据页面px位置,浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。  第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。

HTML5 META标签常用设置参考资料点击打开链接点击打开链接 点击打开链接

3.设备物理像素(设备像素),设备逻辑像素(设备独立像素),代码CSS像素,设备像素比  设备物理分辨率(device pixels):物理分辨率也叫设备像素,物理分辨率是LED显示屏显示的图像原始分辨率

设备逻辑分辨率(device independent pixels):人对于物体真实尺寸的认知(屏幕大小),设计使用逻辑像素来思考界面

代码CSS像素:CSS像素是Web编程的概念,独立于设备的用于逻辑上衡量像素的单位,也就是说我们在做网页时用到的CSS像素单位是抽象的,而不是实际存在的

iphone 6为例(设备像素比是2):  设备物理像素(设备像素):750x1334  设备逻辑像素(设备独立像素):375x667  代码CSS像素:375x667  device-width(设备的物理像素宽):375 (1 CSS PX = 2 设备的物理像素)