[移动web]基本概念

代码规范

一.移动端的相关开发技术

• 1.原生开发

  • 安卓
  • iOS
  • WinPhone

• 2.Hybrid开发(混合开发)

  • 原生App+ webView界面中的H5
• 3. M站(移动web)
  • 展示在手机浏览器或者App内的网页中(引导App下载)

• 对比

Snip20170820_9.png

二.视觉方面

• 点(Points)

一开始，所有图纸的坐标以点为单位。
点是抽象单位，它们只在这个数学坐标空间中有意义。

• 渲染像素(Rendered Pixels)

基于点的绘图渲染成像素。这个过程被称为光栅化。
点坐标 * 比例因子 = 像素坐标。 比例因子越大渲染出来越高清.
比例因子: window.devicePixelRatio
1 CSS pixels = （devicePixelRatio）^2 device pixels

• 物理像素(Physical Pixels)

一般情况下, 物理像素 == 渲染像素。但是有例外(比如plus机型),设备屏幕分辨率 < 渲染像素分辨率.
在显示图像之前，必须对下采样（调整大小）以降低像素分辨率。

• 物理设备(Physical Device)

PPI(Pixels Per Inch): 图像的采样率 （在图像中，每英寸所包含的像素数目）                
DPI (Dots per inch)：打印分辨率 （每英寸所能打印的点数，即打印精度）

三.长度单位

• px

最常用的单位

• em

以父元素为参照的字体大小,也可以做长度单位

• rem

以当前页面html元素(根元素)为参照的字体大小(默认是16px),也可以做长度单位

• 长度单位demo

最大的爹标签p

    儿子0
    儿子1
    儿子2
    儿子3
    儿子4
    儿子5