代码规范

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

• 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 style="font-size: 14px;">最大的爹标签p
<!--<h1 style="font-weight: normal">h1标签</h1>-->
    <span style="font-size: 1em;">儿子0</span>
    <span style="font-size: 2em;">儿子1</span>
    <span style="font-size: 28px;">儿子2</span>
    <span style="font-size: 16px;">儿子3</span>
    <span style="font-size: 1rem;">儿子4</span>
    <span style="font-size: 24px;">儿子5</span>
</p>

<script>
    /* 总结:
     * 1. em: em = parentNode.style.font-size
     * 2. rem: rem = document.documentElement.style.font-size
     * 3. html中fz的大小可以直接设置 npx or n%
      * */
</script>