400-806-0087
您的当前位置:百度推广 > 常见问题 > 营销教程 > 正文

自适应布局的心得体会

时间:2月前 2021-05-07 14:37 所属栏目:营销教程 阅读数量:()

自适应布局的心得体会

现在我们的网站分为两类,一类是固定布局站点,一类是自适应布局站点。固定布局比较传统,只能在一定分辨率下浏览,无论移动端还是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策略,我们在下一章节介绍。

 

如果还想了解“自适应布局的心得体会”相关问题,可以联系官方电话,也可以点击屏幕上方的免费注册按钮

官方电话:400-806-0087(下方免费注册)

TAG标签: 自适应布局
×

恭喜您提交成功

百度推广咨询员会在8:30-18:00以官方电话 进行回拨,请您注意接听,谢谢!

了解更多百度产品优势

×

通过百度营销获取更多客户

首页

帮助

电话

注册