【学习】如何制作手机端html模板（REM的实际应用）

以前制作手机页面时，总是很迷茫，不知从何着手，页面也不知如何处理。会用一些百分比啊，媒体查询啊，还有就是目测了，但是各种手机端的屏幕适配是个老大难的问题，没有做到百分百兼容的。自从发现了rem这个好东西，并且听了一位有经验同事的讲解，顿时豁然开朗，现在对于手机端的页面开发，可以说胸中有一点丘壑了。rem最能打动我的地方在于，他不会改变原来在PC端的代码书写习惯，只是把计量单位换了一下，所以迫不及待的拥抱他了！

具体用法贴出如下：

1、html文档（当然是html5）的头部添加一个meta标签声明：

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

其作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

2、引入最新版本的jQuery库文件

3、加入下面这段jquery代码：

var deviceWidth=$(window).outerWidth();

if(deviceWidth>640){

$("html").css("font-size","100px");

}else{

$("html").css("font-size",deviceWidth/640*100+'px');

}

代码一看就懂，意思是屏幕宽度大于640时，设置rem的基准为100px，反之，则为屏幕宽度除以640再乘上100。这样就实现了响应式效果，不用费力的写媒体查询了。

4、拿到设计效果图切好需要的图片

5、按制作PC端页面的方式书写页面，把px换成rem，因为前面定的1rem=100px,所以原来以px为单位的数据全部向前移动两位小数点。

6、背景图的设置：背景图引入后，必须加上background-size：横向rem，纵向rem，其中的数字就是切图的尺寸，换算成rem，这个尤为重要，只要有背景图就一定要加上，平铺的背景图（repeat），也是同样的写切下来那部分的数值。

7、特殊注意：字号font-size，边框大小、圆角边框的大小，这些最好还是用px来写。

这里我经过实际检验，其实字号用px和rem都可以，但是1px的边框就不要写成0.01rem了，在手机上根本看不到，所以还是写border：1px  solid  #颜色。

是不是小于0.1 rem的数字就不要用了，用回px，因为实在太小，这个还得实际检验一下。

以上就是基本用法，当然了，手机端的开发，根据实际页面的复杂程度，会有各种意想不到的问题，不会像上面写的就这么简单，所以，还是要多多练习，积累实战经验。