移动端基本知识

h5案例分享

移动端基础知识

1. 什么是绝对长度单位？什么是相对长度单位？

绝对长度单位：in（inch英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica）。in、cm、mm和实际中的常用单位完全相同
相对长度单位：是网页设计中使用最多的长度单位，包括px、em、rem等

2. 屏幕分辨率

   以iPhone5为例，我们经常会说某个手机的屏幕分辨率是640 * 1136之类的话语。那这里的屏幕分辨率指的是什么呢？
   横纵向上的像素点数，单位是px，1px=1个像素点。所以这里的意思是640px * 1136px。
   先引出个问题。一个640px * 1136px大小的div是否可以铺满iPhone5的整个屏幕呢？结果如下

由控制台查看div的宽带确实为640px，但是却没有撑满整个iPhone5。并且模拟器上怎么变成iPhone5为320* 568了呢？

3. 逻辑px,物理缩放比dpr

这里说的px像素是物理像素,就是手机无限放大，最小的一个单位。我们写代码中所用到的px是逻辑像素，和这里的物理像素不是一个概念。
px:(css中使用的像素) 逻辑像素，浏览器使用的抽象像素。可以根据不同的设备进行可大可小的调整。
dp/pt: 设备无关像素。就是分辨率中说的px。
dpr:物理像素缩放比
1px = (dpr)的平方 * dp
所以如果dpr为2 如下图所示

横纵轴上一个css像素为两个物理像素。
因为iPhone5的dpr为2所以说iPhone5为

那现在还有两个疑问。

1. 为什么iPhone5的dpr为2

2. 为什么640px * 1136px大小的div在 320px * 568px 的iPhone5上还有许多留白呢？
   先来解释第一个问题：
   dpi/ppi : 屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。
   计算方式：

   
   
   

一英寸内渲染图像的像素越少，渲染出来的图像越不清晰，系统默认的缩放比就越大,例如你把电脑的分辨率调整的很高，东西就会越清晰，但此时电脑上例如图片的icon之类的都会变得更小

下图为默认缩放比与ppi的对应图表

所以iPhone5的dpr为2。

再来解释第二个问题

4. Viewpoint：

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，然后布局都在这个虚拟的viewport中进行，然后对这个viewport进行缩放，以在我们的手机上能够全部显示整个页面。

　　例如iPhone5如果 不设置viewport，他就会默认是980px，就像把屏幕分成980份（不是屏幕分辨率的640px哦！）。如果设置一个元素为100px*100px，看起来就是屏幕的100/980，可能如下图所示：

所以最开始320px的iPhone5设置640px宽的div居然还有空白。就是因为默认的布局是980px的。
如果设置viewport width=device-width，他就会是320px(就是iPhone5在模拟器上显示的像素)，就像把屏幕分成320份（不是屏幕分辨率的640px哦！）。如果设置一个元素为100px*100px，看起来就是屏幕的100/320，可能如下图所示：

我们一般不会使用默认的viewport