前端页面响应式布局简单实现

最新推荐文章于 2024-08-28 23:30:23 发布

羽二

最新推荐文章于 2024-08-28 23:30:23 发布

阅读量3.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34963461/article/details/52691007

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

找到了个网址写的就是这个响应式布局的代码复制粘贴到css 文件就能实现等比例缩放功能

下面是网址 http://www.jiawin.com/response-type-layout-design

里面的范例之一

 /* 当浏览器的可视区域小于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;}
}