到目前为止，我很少写过移动端的页面，但在公司总归是开了一个头，写了人生中第一个相对完整的一个移动网站小主页，虽然难度不大，但是在移动适配等问题上也算是迈出了第一步，也挺值得开心的。所以这里我也把自己的一点小小的心得体会写下来。作为总结。
1.布局
首先是关于布局。布局这种东西我们已经在pc页面上使用过很多次了。无非我们是使用了盒模型，然后加上display,float,position这样的属性来使我们页面达到所设计的样式。但是这种布局在移动端却表现出了很多的不方便。到我现在所知道的，有很多的页面在移动端已经不采用类似pc端的布局方式，而是采用flex布局。(可以参考阮一峰的Flex 布局教程：语法篇)但是，由于本人之前没有接触过移动端的布局方式，所以对flex布局的方式并不是十分的了解，所以也不可能一下子就用上。这里我们就暂时不使用此种方式，采用传统的pc页面布局方式。
续：后来我看了下关于flex布局的介绍，其实，这种布局方式是很简单的，跑一下阮一峰文章中的案例，就能基本上手了。用flex布局的技巧，外加后面我所写的rem的使用，能达到相当不错的移动端的页面效果，当然，如果要做响应shi式的布局，推荐使用bootstrap或者去使用css3中的新特性：@media。
2.依赖
jquery 依然是万金油，这里我们也没有使用zepto这种在移动端备受好评的库，当然，以后肯定会有所尝试。
bootstrap 也是超级不错的选择。在构建响应式的页面方面，bootstrap有着很不错的表现。但作为入门，我们只要做一个简单的页面。没有必要引进一大推的bootstrap文件。
3.适配方式
其实，这里我主要讲的说的是一种最基础的适配方式。而且核心代码也只有简单的一句。但确实惊艳到我了，哈哈。
对于一般的移动端的设计图纸，很多都是以iphone6的分辨率来做的。这里也不例外。但在移动开发中，你要面对的是各种千奇百怪的分辨率，所以，如何做出一个能自动去适应各种屏幕的移动网站，确实对于新手而言有些恼火。
这里我就给出一个简单的方案，让大家能最快的从pc端进入移动端页面。
4.核心
接下来就是介绍那一句代码的核心了。
首先和做普通的页面一样，不过记得打开chorme的移动开发工具，就是那个小手机的按钮，然后选择iphone6的分辨率，就以此来为标准开始开发。
首先，我们要在html或者body的css中加上一句：1
2
3html{
font-size:"100px";
}
这里我们把默认的字体设置为了100px,因为我们在整个的css中需要使用一个与px完全不同的单位:rem。
那么，什么是rem呢？
在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。
rem是根据其根元素来确定相对长度大小的，你可能也听说过em，只是后者是根据父元素来确定其的相对长度，两者还是有所不同的。（可以尝试谷歌下px和rem还有em之间的差异）
此时，我们要在css中写一个marign-left:10px，我们采用em为单位时，需要把10px转换为em，转换的公式也是很简单的，只要拿这个px值去除以我们在html标签中所设置的font-size的值，这里就是10/100 = 0.1rem。
字体的大小也是同样的方法，12px的字，就用0.12rem来表示（根据自己设置的html中，font-size的值的不同而有所不同）
之后，我们就可以像开发pc端的页面一样，完成整个的布局。但是我们会发现，使用rem单位之后，虽然在iphone6的分辨率之下页面的展示没有问题，但如果切换分辨率，例如换成iphone5,适配还是会出现很大的问题。解决这个问题的方法很简单，也就是之前我所说的那个，很惊艳到我的一行代码。
我们需要完成一段js代码:
1 | $("html").css("font-size":100*$("body").width()/750+"px");//这个750是你最初使用的布局分辨率 |
这样在看其他分辨率，都按相应的比例做出了不错的缩放。
至此，我们就从pc完全着陆到了移动端页面。但是上述的方式还是属于比较硬的过度，推荐大家还是去了解关于flex的布局方式，这才是比较先进的解决方案。当然，世界上没有银弹，只要能解决问题，都是好的解决方案。