之前一段时间一直做pc端的页面，对pc端页面的代码书写原则也有了一定的见解，但最近一段时间开始被要求写移动端页面，这让我开始犯难，原因是移动端页面的分辨率并不像pc端那样固定，如何写一个网页可以自动适配所有移动端的分辨率呢？于是我在网上找到了一些答案，这里拿出来和大家分享，初学者水平有限欢迎批评指正，不喜勿喷。解决方案大致分为两种：1.做响应式开发。2.写css时使用css3的rem、代替px、em为单位；利用css3媒介查询技术针对不同分辨率做细微调整，以保证页面的友好性；使用css弹性盒子布局方式对块元素进行布局，达到适配不同移动端分辨率的目的。
一.首先做响应式，的确可以达到兼容不同分辨率的目的，但响应式开发的主要用途是开发一个页面可以对超大pc屏、中等pc屏、pad屏、及手机端各屏进行友好适配，但本人开发页面仅仅用于手机端，响应式的开发对其来说有点大材小用了，杀鸡焉用牛刀。同时响应式开发和维护成本也要比单独开发维护手机端页面要高，因此响应式开发的方式pass了。
二.1.pass掉了响应式开发方法接下来就只剩第二条路了。首先说一下在css中px、em、rem、这三个单位的区别吧。
（1）px：css2.0手册中说px（像素）相对长度单位，是相对于显示器分辨率而言的。
（2）em：css2.0手册，em相对长度单位，指当前元素相对于最近的已设置字体尺寸的祖先元素的字体尺寸，如果所有祖先元素都未认为设置单位，则相对于浏览器默认字体尺寸。举个栗子：假设当前元素的父元素已人为设置字体尺寸为10px；那么相对于当前元素而言1em=10px；如果想设置当前元素字体尺寸为5px，则写为0.5em即可。使用em尺寸的优点是，当父元素尺寸发生变化时当前元素的尺寸自动随之改变。
（3）rem：css3新增的一个相对单位，使用rem为单位与em有一定的相似性，em是指相对于当前元素最近已设置字体尺寸的的祖先元素而言的，而rem则指相对于html根元素而言的。只要设置了html根元素的字体尺寸所有后代元素全部以rem设置单位，优点是，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。基于以上优点这也成为当前移动端页面的首选方案。也是本人的选择。
2.接下来是媒介查询技术了，媒介查询技术也是css3新增的规范，使用css语法， @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕分辨率设置不同的样式。这在移动端页面的设计上也十分重要，毕竟使用了rem作为单位并不能保证页面也元素100%正确不出现问题，在某些分辨率下还会出现令人意想不到的结果，这时就可以利用媒介查询技术针对该分辨率范围内样式做单独修改，而不会影响到其他分辨率。举个栗子：设置文档宽度小于 300 像素则背景颜色(background-color)设置为如下:
@media screen and(max-width: 300px) {
body {
background-color:lightblue;
}
}</span></span>
3.弹性盒子技术（Flexible Box）也是css3的新规范，使用CSS Flexible Box模块中定义的弹性盒布局技术，可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理。很多大型网站的移动端项目都采用了这种布局方式。接下来说具体操作。
三.1.以设计稿640的横向分辨率来说：
（1）首先依据不同分辨率下屏幕的宽度，动态计算不同分辨率的html根元素的font-size，js代码：
document.documentElement.style.fontSize =document.documentElement.clientWidth / 10 + 'px';
（2）使用css布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10
（3）设置了一个临界点，当设备竖着时横向物理分辨率大于1080时，html的font-size就不会变化了，分辨率已经转到pc端页面了。
2.这里有一个小问题，由于rem是根据元素在设计稿上的标注尺寸及十几号横向分表率动态计算的，这就需要我们测量出每个元素的设计稿标注尺寸然后进行大量的手动计算，计算出rem值设置到css上，这种大量重复的傻瓜式工作显然不是我们想要的，难倒没有方法避免么？答案当然是有的。使用动态样式语言（如：less、sass、stylus），它们的优势是具有变量、函数的概念，同时具有计算功能，只要设置好计算公式，就可以动态的计算出元素的rem值，是不是很牛x，帮了大忙呢！有兴趣的亲们可以自行学习。
3.这里以less为例，less对于学习过css的人来说学习成本很小，几乎是几个小时就能掌握基本的用法了，同时它还支持全部的css代码，也就是说在less中你书写了一些css代码，ok没问题，照样可以编译支持。置于less如何编译为css，不是本文的重点，各位自行百度。（提示：可以使用node.js进行less的编译，或者选择网上提供的less编译工具）本人针对本公司的项目诉求及代码编写的一般规则书写的rem动态计算编译代码如下，不具有广泛适用性，代码质量也并不一定高，仅供参考。
//如设计图宽度改变修改此值即可
@base-number:640/10;
//margin:10px;
.calc(@attr,@size) when (isnumber(@size)) {
@{attr}:@size*@base-number*1rem;
}
//margin:auto;
.calc(@attr,@size) when (@size=auto) {
@{attr}:auto;
}
//margin:5px 10px;
.calc(@attr,@size1,@size2) when(isnumber(@size1))and (isnumber(@size2)) {
@{attr}:@size1*@base-number*1rem @size2*@base-number*1rem;
}
//margin:0 auto;
.calc(@attr,@size1,@size2) when(isnumber(@size1))and (@size2=auto) {
@{attr}:@size1*@base-number*1rem auto;
}
//margin:auto auto;
.calc(@attr,@size1,@size2) when(@size1=auto)and (@size2=auto) {
@{attr}:auto;
}
//background-position:center center;
.calc(@attr,@size1,@size2) when(@attr=background-position) and not(isnumber(@size1)) and not(isnumber(@size2)){
@{attr}:@size1 @size2;
}
//background-position:-100px center;
.calc(@attr,@size1,@size2) when(@attr=background-position) and (isnumber(@size1)) and not(isnumber(@size2)){
@{attr}:@size1*@base-number*1rem @size2;
}
//background-position:center -350px;
.calc(@attr,@size1,@size2) when(@attr=background-position) and not(isnumber(@size1)) and (isnumber(@size2)){
@{attr}:@size1,@size2*@base-number*1rem;
}
//margin:5 10 4;
.calc(@attr,@size1,@size2,@size3) when(isnumber(@size1)) and (isnumber(@size2)) and(isnumber(@size3)){
@{attr}:@size1*@base-number*1rem @size2*@base-number*1rem @size3*@base-number*1rem;
}
//margin:5 auto 3;
.calc(@attr,@size1,@size2,@size3) when(isnumber(@size1)) and (@size2=auto) and(isnumber(@size3)){
@{attr}:@size1*@base-number*1rem auto @size3*@base-number*1rem;
}
//margin:auto auto auto;
.calc(@attr,@size1,@size2,@size3) when(@size1=auto) and (@size2=auto) and(@size3=auto){
@{attr}:auto;
}
//border:1px solid #ccc;
.calc(@attr,@size1,@size2,@size3) when(@attr=border) and(isnumber(@size1)){
@{attr}:@size1*@base-number*1rem @size2 @size3;
}
//border:solid #ccc 1px;
.calc(@attr,@size1,@size2,@size3) when(@attr=border) and(isnumber(@size3)){
@{attr}:@size1 @size2 @size3*@base-number*1rem;
}
//border:solid 1px #ccc;
.calc(@attr,@size1,@size2,@size3) when(@attr=border) and(isnumber(@size2)){
@{attr}:@size1 @size2*@base-number*1rem @size3;
}
//margin:5 10 6 3;
.calc(@attr,@size1,@size2,@size3,@size4) when(isnumber(@size1)) and (isnumber(@size2)) and(isnumber(@size3)) and(isnumber(@size4)){
@{attr}:@size1*@base-number*1rem @size2*@base-number*1rem @size3*@base-number*1rem @size3*@base-number*1rem;
}
//margin:5 auto 3 auto;
.calc(@attr,@size1,@size2,@size3,@size4) when(isnumber(@size1)) and(@size2=auto) and(isnumber(@size3)) and(@size4=auto){
@{attr}:@size1*@base-number*1rem auto @size3*@base-number*1rem auto;
}
//margin:auto auto auto auto;
.calc(@attr,@size1,@size2,@size3,@size4) when(@size1=auto) and(@size2=auto) and(@size3=auto) and(@size4=auto){
@{attr}:auto;
}
//text-shadow:3px 3px 2px #ccc;
.calc(@attr,@size1,@size2,@size3,@size4) when(@attr=text-shadow),(@attr=box-shadow) and not(isnumber(@size4)){
@{attr}:@size1*@base-number*1rem @size2*@base-number*1rem @size3*@base-number*1rem @size4;
}</span></span>