响应式布局

来源：互联网发布：深圳网络诈骗举报编辑：程序博客网时间：2024/06/10 03:44

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

优点：

面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

在样式表中内嵌@media：

@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

通过Media Queries实现响应式布局设计

 /* 当浏览器的可视区域小于980px */@media screen and (max-width: 980px) {     #wrap {width: 90%; margin:0 auto;}     #content {width: 60%;padding: 5%;}     #sidebar {width: 30%;}     #footer {padding: 8% 5%;margin-bottom: 10px;}} /* 当浏览器的可视区域小于650px */@media screen and (max-width: 650px) {     #header {height: auto;}     #searchform {position: absolute;top: 5px;right: 0;}     #content {width: auto; float: none; margin: 20px 0;}     #sidebar {width: 100%; float: none; margin: 0;} }

0 0