移动web开发入门—基础知识、自适应布局、调试

之前没做过移动端web开发,最近接手的一个小项目是做微信公众号,需要考虑手机适配。UI给出的设计稿是一般是基于iphone手机做的(15年之后是基于ipone6),我们的UI是基于iphone6来做的(iphone6手机的分辨率是1334 * 750)。开发过程中主要有几个疑问:
1、如何将设计稿的尺寸转换到开发尺寸?
2、如何实现自适应?
3、如何调试在手机中的展示效果
下面会针对这几个问题展开讲解。讲解之前,要先讲下移动端开发的基础知识。

一、基础知识

1、屏幕尺寸

即我们通常说的尺寸是多少多少英寸啦,指的是屏幕对角线的长度。比如iphone6的屏幕尺寸是4.7英寸

px,pixel,像素,电子屏幕上组成一幅图画或image的基本单元。
pt, point,点,印刷行业常用单位,等于1/72英寸。
ppi,pixel per inch,每英寸像素数,值越高,屏幕越细腻。
dpi, dot per inch,每英寸多少点,该值越高,则图片越细腻。
dp,dip, Density-independent pixel,安卓开发用的长度单位。以160ppi为标准,和iPhone的scale差不多的意思。安卓用dp适配,系统会自动将dp转换为px。当屏幕像素点密度为160ppi时,1dp=1px。

2、屏幕分辨率
屏幕上的像素总数。常用的表现形式如:1280x720, 1920x1080等。这个像素指的是物理像素
3、pt和px

pt:pixel,像素,电子屏幕上组成一幅图画或image的基本单元。
pt:point,点,印刷行业常用单位,等于1/72英寸。
但是你想知道的pt可能并不是指这里的pt,而是IOS系统的pt,请往下看
4、 ios pt 和 px
1)px:
像素,电子屏幕上组成一幅图画或image的基本单元。
2)pt
iOS 开发中用到的单位 pt 是独立像素的意思。和安卓中的单位dp本质上是一个概念。

它是绝对长度,不随屏幕像素密度变化而变化(和我们日常用到的毫米、厘米是一个意思,只是它要小得多)。
在非视网膜的 iPhone 上(iPhone 3G),苹果规定 1px=1pt,也就是说 pt 和像素点是一一对应的。但随着 iPhone 4 的到来,高分屏出现了(视网膜屏),这个时候 1pt 对应 2px。

出现了所以用固定长度 pt 作为开发单位的好处是:这样可以统一图形在同一种类不同型号设备上图形的大小。而如果用像素作为单位的话,就乱了套了,因为在不同像素密度的屏幕里面,像素本身大小是不一样的。

5、PPI和DPI

1)PPI

设备像素密度(pixel per inch),一般手机参数中会给出ppi的值。表示每英寸像素数,值越高,屏幕越细腻。在购买手机时,ppi的值是用户关注的数据。

比如iphone 6的分辨率是1334 * 750,那PPI = (1334 ^ 2 + 750 ^ 2) ^ 1/2

通常把超过300ppi的显示屏成为retina屏。当一个显示屏像素密度超过300ppi时,人眼就无法区分出单独的像素。这也是讲:显示设备清晰度已达到人视网膜可分辨像素的极限。因此手持平板类电器显示器的像素密度达到或高于300ppi就不会再出现颗粒感。

另外观视距离及显示器尺寸的大小或许可改变上述像素密度超过300ppi的定义,因为人的观视距离在2米开外显示器像素密度只要超过200ppi也无法区分出单独的像素。
2)DPI

DPI(Dots Per Inch)最初用于衡量打印无上每英寸的点数密度,就是说你的打印机可以在一英寸内打多少个点。DPI值越小,图片越不惊喜。
当DPI的概念用在计算机屏幕上时候,和PPI是一样的。一般在IOS和Android中提到的DPI和PPI指的是同一个值

2、物理像素、设备独立像素、设备像素比

1)物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。屏幕分辨率指的就是物理像素。

2)设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素、逻辑分辨率),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。
设备独立像素就是对应前端在开发时使用的像素单位。
所以说,物理像素和设备独立像素之间存在着一定的对应关系,这就是接下来要说的设备像素比。

3)设备像素比(device pixel ratio )
设备像素比(简称dpr,也叫倍率)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到:

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上,x方向或者y方向

在javascript中,可以通过window.devicePixelRatio获取到当前设备的dpr。
在css中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和we

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值