移动端页面适配以及meta的属性和用法

移动端段适配一直都是我们开发过程中最头疼的问题，下面总结了一些适配的方法，有的是转自其它地方，由于本人水平有限，若有错漏之处敬请谅解。

---

一、rem布局

代码如下:
注意这段代码一定要放在body之上，否则无效。

也可参照http://caibaojian.com/flexible-js.html

二、首先请了解一下移动前端中 viewport （视口）http://www.css88.com/archives/5975

这里介绍一下几个移动前端适配—低级、无趣、一堆问题的老方法。早在几年前，移动前端适配有几个很简单使用的方法。那时屏幕尺寸或者说分辨率没如今这么多。一般设计师设计移动端页面统一按照640像素的宽度设计。因为当时的主流是iPhone4，iPhone4s ，iPhone5及iPhone5s，物理像素宽度为 640，分辨率为320。其他安卓机型可以根据这些尺寸做简单粗暴的匹配。

例如下面是适配最简单粗暴的方法，而且根据我平时查看项目的代码的习惯，还有相对一部分项目还是使用这个方法做项目，或者维护项目：

看起来很简单，也很实用。开发时候一切根据640的设计稿除以2处理，字体也用简单的像素做单位（用rem换算麻烦）似乎是很完美，但是实际情况，特别是一些对齐，背景吻合总是会出现问题。还有就是用现在高分辨率的iPhone6s等手机看，总是会被设计师鄙视。

如今手机屏幕尺寸越来越多，可以稍微升级一下上面的方法，同样在html头部head标签中先插入一个meta标签，在插入一个脚本设置缩放值：

这样就比较完美了。

三、meta基础知识

也可参照以下网站

http://www.daqianduan.com/6281.html

http://www.w3cfuns.com/notes/18165/f08c0ec910dad6d2c90807a0318abda8.html