学习手机端网站制作，有没有好的书籍推荐？跟PC端网站前端有啥不一样的？

PC版的网站普遍width宽度都是固定的，比如常用的980px。一般情况下，PC显示器的分辨率像素px可以认为等价于CSS里像素的值，但手机上就不一样了，比如5英寸1080P（1920×1080）分辨率的手机比如小米4，其window.document.body.clientWidth也就是viewport的width只有360px，显然，手机上的CSS中的1px并不等于手机屏幕的1px。

所以，手机版网站，特别之处就在于要做宽度自适应，先来一句声明：

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放.

布局方法：
1、width:320px; 固定宽度居中，在iPhone4上效果刚好，但大一点的手机，两边就会有空白，所以这样搞感觉不好。
2、min-width:320px; max-width:480px; width:100%; 最小宽度320px，最大宽度480px，在320px和480px之间自动适应宽度，看起来还行。容器里面的块，你同样可以用百分比布局，比如左边的60%，右边的40%，就算是图片，在合理范围内，宽被拉伸，影响也不大，我现在就用这招。
3、@media(媒体查询)，segmentfault.com用的就是这招，有点编程的味道，有点复杂，个人不感冒。
4、rem等比例适配所有屏幕：
html{ font-size: 20px; } .btn { width: 6rem; height: 3rem; }
这里.btn的6rem等于6×20px=120px。你可以用window.document.body.clientWidth拿到屏幕宽度，然后根据屏幕宽度设置html的font-size的值，从而实现调整整个页面的rem值。这个也有点复杂，我也没用。
5、设置viewport进行缩放：以320px宽度为基准进行缩放，最大缩放为320*1.3=416，方法简单粗暴又高效。

Firefox的响应式设计视图(Ctrl+Shift+M)和Chrome的设备模式都能调试移动端网页。

参考: http://isux.tencent.com/web-app-rem.html