微信小程序 不同的移动设备上应该如何设置rpx单位?
我们在做微信小程序的开发时,经常会遇到在写样式表的时候发现用PX的效果不太理想的情况。日常开发中,我们常用rem、em来做响应式布局的像素单位,他们都是相对单位。rem相对于文档的根元素,em相对于父元素。但是在微信小程序的官方文档用rpx来做响应式布局单位!那什么是RPX,应该如何设置呢?今天我们就来好好了解一下。
[color=rgb(44,]
说实话,一开始没看懂。rpx到底是个啥?又该如何理解“750rpx
= 375px = 750物理像素”这句话呢?
开始之前,我们先扯一扯像素、物理长度、设备独立像素、设备独立像素比都是些啥? 【像素】:它不是自然界的物理长度,指基本原色素及其灰度的基本编码。 【物理像素】:它是显示器(电脑、手机屏幕)最小的物理显示单位,每个物理像素由颜色值和亮度值组成。是不是有点眼熟?我们要记住物理像素指的是显示器上最小的点。 【设备独立像素】:它又称密度无关像素,划重点——密度无关,是计算机程序实际处理的虚拟像素(如css的px),由相关关系转化为设备像素。这个相关关系就是指下面要介绍的——设备像素比 【设备像素比】:设备像素比 = 物理像素 / 设备独立像素,单位是dpr! 还是没有看懂?没有关系,我们从图片上来看一下移动设备的分辨率和rpx的关系:
以iPhone6为例: 已知,1. 设备宽高 375 * 667,在这里我们可以看做是css中的px(密度无关像素);2. retina屏幕的dpr为2。 求 iPhone6 的物理像素是多少? 送分题啊,同学们! 根据公式,我们计算出iPhone 6 的物理像素为 750 * 1334 结论: 在不同的屏幕上(普通屏幕 vs retina屏幕),css像素所呈现的大小(物理尺寸)是一致的,不同的是1个css像素所对应的物理像素个数是不一致的。 在普通屏幕下,1个css像素 对应 1个物理像素(1:1)。 在retina 屏幕下,1个css像素对应 2*2个物理像素(1:4)。 【位图像素】:一个位图像素是栅格图像(如:png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如:显示位置,颜色值,透明度等)。觉得复杂?你只需要记住1px表示一个图片最小的点。不信?我们来用PS放大一张图片,可以看到图片被拆分成无数个点,但无论你如何放大那些小点,他们都不能再次被拆分了,因为他们已经是像素级别的点了,已经是最小的了。 理论上,1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示。 所以,在宽高375 * 667,dpr为2 的 iPhone 6中完美显示200*300(css pixel)img标签,图片的尺寸应该为多少呢?答案是:400 * 600。 这就是我们针对iPhone 6 的设计稿的尺寸基于 750*1334 来设计的目的了。 回到正题.......rpx是啥? 有了上面的做铺垫,我们知道了对于iPhone6 来说, 1rpx = 1物理像素,1rpx = 0.5px; 如果不是iPhone 6 呢? 1rpx = window.innerWidth/750。 1px = 1rpx * dpr。
2.样式导入
[AppleScript] 纯文本查看 复制代码
@import "common.wxss";
3.内联样式
[AppleScript] 纯文本查看 复制代码
//动态样式
(2)class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。 <view class="normal_view" />
4.选择器
5.全局样式与局部样式 二:设备物理像素(设备像素) 设备逻辑像素(设备独立像素) 代码CSS像素 设备像素比 viewport深入理解
1.viewport(可视区域大小)的概念理解和知识积累 2.移动端的HTML5开发META的常用设置 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
第一个meta标签表示:强制让文档的宽度(viewport宽度)与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览; <meta content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
initial-scale - 初始的缩放比例 HTML5 META标签常用设置参考资料点击打开链接点击打开链接 点击打开链接
3.设备物理像素(设备像素),设备逻辑像素(设备独立像素),代码CSS像素,设备像素比 设备逻辑分辨率(device independent pixels):人对于物体真实尺寸的认知(屏幕大小),设计使用逻辑像素来思考界面 代码CSS像素:CSS像素是Web编程的概念,独立于设备的用于逻辑上衡量像素的单位,也就是说我们在做网页时用到的CSS像素单位是抽象的,而不是实际存在的
iphone 6为例(设备像素比是2):
**案例:**iphone 6s 的物理像素是750x1334,JS中window.innerWidth就是获取设备的物理像素,为什么window.innerWidth获取的值是375而不是750呢?
以iPhone 5s为例,屏幕的分辨率是640×1136,倍率是2。浏览器会认为屏幕的分辨率是320×568,仍然是基准倍率的尺寸。 |