代码规范
一.移动端的相关开发技术
-
1.原生开发
- 安卓
- iOS
- WinPhone
-
2.Hybrid开发(混合开发)
- 原生App+ webView界面中的H5
-
- 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>
