主机迷主机迷

不使用bootstrap,如何用简单的办法实现网页自适应

不使用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;
}

参考:
设计网页,常见的宽度是多少像素
响应式和自适应的区别
如何进行自适应网页设计?

转载请注明出处 | 当前页面:主机迷 » 不使用bootstrap,如何用简单的办法实现网页自适应

评论

  • 请输入 2 + 4 = ? 的计算结果: