自适应布局的心得体会

自适应布局的心得体会

现在我们的网站分为两类，一类是固定布局站点，一类是自适应布局站点。固定布局比较传统，只能在一定分辨率下浏览，无论移动端还是pc端，固定宽度都是最传统的存在，比如天猫pc端网站就是采用固定宽度布局，这样的布局沿用至今，一方面是因为一些成熟的网站改动起来太费劲，一方面就是较好的调试性，方便维护。自适应布局比较主流，在当前网络设备纷杂的环境下，自适应已经成为网站类型的主流趋势，它有着传统布局的基础，又有着全设备兼容的特性。今天我就梳理一下使用自适应布局的方法和体会。

“自适应”，也就是说在不同渲染设备下，保持良好的浏览效果，对用户保持一致的浏览体验。如今主流的分辨率有手机端，pad端，pc端三种设备，这三种设备的尺寸各有不同。在一个网站中有多种解决方案来处理不同的设备兼容。今天我们只考虑自适应布局，如何在一套代码中兼顾这么多分辨率呢？在项目开发中，最得心应手的就属媒介查询（@media）了。媒介查询虽然是css3的新属性但是通过特殊处理可以兼容到ie8，那么在ie8已经逐步被替代的当今网络环境中，媒介查询完全可以兼容各种设备。在项目开发中我总结的媒介查询的分辨率节点如下：

/*PC端优先写法*/

@mediascreenand(max-width: 1200px) {

body{

background-color:lightblue;

}

}

@mediascreenand(max-width: 992px) {

body{

background-color:blue;

}

}

@mediascreenand(max-width: 768px) {

body{

background-color:red;

}

}

/*移动端优先写法- bootstrap3 以后都是这种移动优先的写法*/

@mediascreenand(min-width: 768px) {

body{

background-color: yellow;

}

}

@mediascreenand(min-width: 992px) {

body{

background-color:blue;

}

}

@mediascreenand(min-width: 1200px) {

body{

background-color:red;

}

}

现在主流开发方向是针对移动端优先的写法，所以在bootstrap3以后都是移动优先。好了，用了媒介查询是不是就可以满足自适应要求了，当然没有那么简单。打开淘宝wabapp 可以看到它使用的一种技术是 rem 单位计量技术。使用rem可以在不同的媒介中设置不同的根单位，从而整体改变站点的所有元素尺寸。具体如何实施rem策略，我们在下一章节介绍。