首页 > 代码库 > 响应式布局

响应式布局

现在移动设备越来越普及,用户使用智能手机、pad上网页越来越普遍。但是传统的fix型的页面在移动终端上无法很好的显示。因此,Ethan Marcotte提出一种响应式web设计的概念。

步骤:

1、使用media信息来帮助判断屏幕尺寸

2、使用百分比来替换以前使用的像素来声明宽度等与尺寸相关的信息

如:

HTML部分:

<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

CSS部分:
@media screen and (min-width: 1000px) {
.box{
width: 500px;
border: 1px solid;
margin: auto;
}
.box>div{
width: 50%;
height: 100px;
outline: 1px solid;
float: left;
}
}
@media screen and (max-width: 1000px) {
.box{
width: 250px;
margin: auto;
}
.box>div{
width: 100%;
height: 100px;
outline: 1px solid;
}
}
在全屏下:
技术分享

小于1000px:

技术分享

 

显然,这两者的CSS分布是不同的,上图的三栏显示中,左右两边的column需要各自float到所需的方向上,而下图的流式布局中,各个块之间是串行向下显示的。因此,可知至少对于每一个不同的CSS分布,应该有不同的策略。现在可以编辑两个不同的CSS文件,然后使用<link>指令做引入。但是还可以使用@media语句,进行逻辑判断。如下:


@media screen and (min-width:480px){/*css style*/}


其中,screen是media众多类型的一种,其他常见的media类型还有print。而min-width是media的feature之一。media有很多feature可以用来帮助我们做逻辑判断,常见的还有monochrome(单色的)、max-width等

响应式布局