不使用bootstrap,简单的实现页面自适应布局,基本思路就是分为两种情况,大屏幕设为左右结构,小屏幕使用css媒体查询器变为上下结构。
页面的基本元素如下:
<div class="container">
<div class="content"></div>
<aside class="sidebar"></aside>
</div>
基本样式如下:
.container {
position: relative;
max-width: 1200px;
}
.content {
width: 820px;
float: left;
}
.sidebar {
width: 360px;
float: right;
}
使用css的Media媒体查询器
@media (max-width: 1024px)
.container {
margin: 0 5px;
}
.content {
float: none;
width: 100%;
}
.sidebar {
float: none;
width: auto;
margin: 2px;
}