2015-07-04

移动web教程

基础知识

屏幕

移动设备与pc设备最大的差异在于屏幕，主要体现在屏幕尺寸和分辨率两个放方面

长度单位
在web开发中可以使用px、em、pt、in、cm做为长度单位。
像素是一个相对长度单位。
像素密度
DPI、PPI
当PPI越大，像素的实际大小就会越小，反之，越大。
独立像素
能够保证图像内容在同的PPI设备上看上去大小差不多，这就是独立像素
单位用dp（pt）表示
物理像素与css像素的关系
物理像素与css像素并不总是1：1的关系。
视口

视口是用来约束网站中最顶级的标签的，即他决定了的大小

在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览器会设置一个默认大小的viewport，同时为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸。
- layout viewport（布局视口）
  指的是我们可以进行网页布局区域的大小，同样是以CSS像素做为计量单位，可以通过下面方式获取
  // 获取layout viewport
  document.documentElement.clientWidth;
  document.documentElement.clientHeight;
- ideal viewport（理想视口）设备屏幕区域，以dp（或pt、px）做为计量单位，不同的设备具有不同大小的理想视口，其大小是不可能被改变的，通过下面方式可以获取。
  // 获取ideal viewport有两种情形
  // 新设备
  window.screen.width;
  window.screen.height;
  // 老设备
  window.screen.width / window.devicePixelRatio;
  window.screen.height / window.devicePixelRatio;
  - 在理解了上述三个viewport后我们来解释为什么网页会被缩放或出现水平滚动条，其原因在于移动设备浏览器会默认设置一个layout viewport，并且这个值会大于ideal viewport，那么我们也知道ideal viewport就是屏幕区域，layout viewport是我们布局网页的区域，那么最终layout viewport最终是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条了，那么为什么有的移动设备网页内容被缩放了呢？移动设备厂商认为将网页完整显示给用户才最合理，而不该出现滚动条，所以就将layout viewport进行了缩放，使其恰好完整显示在ideal viewport（屏幕）里，其缩放比例为ideal viewport / layout viewport。
移动浏览器
移动端开发主要是针对IOS和Android两个操作系统平台的，除此之外还有Windows Phone。
移动端主要可以分成三大类，系统自带浏览器、应用内置浏览器、第三方浏览器
系统浏览器：指跟随移动设备操作系统一起安装的浏览器。
应用内置浏览器：通常在移动设备上都会安装一些APP例如QQ、微信、微博、淘宝等，这些APP里往往会内置一个浏览器，我们称这个浏览器为应用内置浏览器（也叫WebView），这个内置的浏览器一般功能比较简单，并且客户端开发人员可以更改这个浏览器的某些设置，在我们理实的开发里这个浏览器很重要。
第三方浏览器：指安装在手机的浏览器如FireFox、Chrome、360等等。
在IOS和Android操作系统上自带浏览器、应用内置浏览器都是基础Webkit内核的。

屏幕适配

经过分析我们得到，移动页面最理想的状态是，避免滚动条且不被默认缩放处理，我们可以通过设置`<meta name="viewport" content="">`来进行控制，并改变浏览器默认的layout viewport的宽度。

当我们设置width=device-width，也达到了initial-scale=1的效果，得知其实 initial-scale = ideal viewport / layout viewport。
两种方式都可以控制缩放，开发中一般同时设置width=device-width和initial-scale=1.0（为了解决一些兼容问题）

`<meta name="viewport" content="width=device-width, initial-scale=1.0">``

我们知道，滚动条是 layout viewport 相对于 ideal viewport 的，所以只要设置 layout viewport 小于或等于 ideal viewport，即<meta name="viewport" content="width=device-width">。
经测试发现我们并没有完全的解决滚动条的问题，原因在于我们示例里的.box {width: 1024px;}设置了一个绝对的宽度造成的，要解决这个问题我们可以设置一个百分比（100%）的宽度

适配方式

百分比适配
rem适配
- em 相对长度单位，其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号大小例如 .box {font-size: 16px;} 则 1em = 16px .box {font-size: 32px;} 则 1em = 32px，0.5em = 16px
  rem 相对长度单位，其参照根元素(html)字号大小例如 html {font-size: 16px;} 则 1rem = 16px html {font-size: 32px;} 则 1rem = 32px，0.5rem = 16px;
栅格适配

zepto.js的下载

zeptojs为我们封装了常的触屏事件，需要touch模块支持，默认没有构建此模，我们可以自定义构建。
1、安装Nodejs环境
2、下载zepto.js
3、解压缩
4、cmd命令行进入解压缩后的目录
5、执行npm install 命令
6、编辑make文件，添加自定义模块并保存，
7、然后执行命令 npm run-script dist
8、查看目录dist即构建好的zepto.js

媒体查询

设备终端的多样化，直接导致了网页的运行环境变的越来越复杂，为了能够保证我们的网页可以适应多个终端，不得不专门为某些特定的设备设计不同的展示风格，要实现这个目标的前提是必须有能力了解当前网页是运行什么终端设备，通过媒体查询可以做到这一点。

关键字
1.and 可以将多个媒体特性连接到一起，相当于“且”的意思。
1. not 排除某个媒体类型，相当于“非”的意思，可以省略。
2. only指定某个特定的媒体类型，可以省略。

用法

@media only screen and (max-width:320px){
    body{
        background-color:pink;
    }
}

常用的一些特性
1. width / height 完全等于layout viewport，
2. max-width / max-height 小于等于layout viewport，
3. min-width / min-height 大于等于layout viewport，
4. device-width / device-height 完全等于ideal viewport，l
5. orientation: portrait | landscape 肖像/全景模式

css 预处理器

CSS 预处理器是一种语言，用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，并且你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更简洁，适应性更强，代码更直观等诸多好处。

常见的CSS预处理器有：LESS、SASS、Stylus等

安装
1. 安装Nodejs环境 Node Package Manager (验证 node -v npm -v)
2. 打开控制台（cmd），执行npm install -g less (验证 lessc -v)
3. 执行 npm install -g less-plugin-clean-css
4. 命令行编译 lessc path/xxx.less path/xxx.css
编译
一般都会借助于编辑器插件来完成编译任务，以sublime_text为例
1. ctrl+shit+p打开命令面板
2. 输入install package然后回车
3. 安装 LESS、lessc、Less2Css三个插件
4. alt+s快捷键即可实现编译
语法
1. 变量
  格式：@变量名: 值，定义完成后可以重复使用
2. 混合
  我们可以像使用函数一样来使用CSS
3. 嵌套
  嵌套可以非常方便的管理我们的CSS层级关系
4. 引入方式
  <link rel="stylesheet/less" type="text/css" href="styles.less" />

网页布局

1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。
3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。
注：以上几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使和的。