响应式web设计

固定宽度布局的缺点

我们经常可以看到固定宽度的布局.例如960px的页面在笔记本上可能显示刚刚好,但是在高分辨率的显示器上两侧就会出现留白,可是我们现在有了智能手机.手机浏览器会将一个标准页面缩放到与视口(即:设备可视区域)恰好匹配.然后用户可以选择在自己感兴趣的内容上放大浏览,这样就导致了用户体验非常糟糕!(想象一下不停的点击放大滑动然后缩小,更可恶的是如果误点击了一个链接).响应式web设计的核心是移动优先.

在使用CSS3属性的时候需要注意浏览器前缀,并且将不带有前缀的添加到最后,这样如果该属性可用就会覆盖之前的声明.

百分比宽度的计算

百分比宽度 = 目标元素宽度 / 上下文元素宽度,例如我们有以下的固定宽度的布局:


  
    
      
 link1
 link2
      
    
  
  
    this is aside
  
  
    this is content
  
  
    this is footer
  


#wrapper{
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}
nav{
  width: 940px;
  margin: 26px 0 0 -10px;
  padding: 25px 10px 0 10px;
}
nav ul li{
  display: inline-block;
}
aside{
  border: none;
  border-right: #e8e8e8 solid 2px;
  margin: 58px 10px 0 10px;
  padding-right: 10px;
  float: left;
  width: 220px;
}
article{
  margin: 58px 10px 0 0;
  float: right;
  width: 698px;    
}
footer{
  float: left;
  margin: 20px 10px 0 10px;
  clear: both;
  width: 940px;
}


根据经验,我们将最外层的#wrapper的宽度设置为96%,那么nav的宽度应该设置多少?我们用940/960 = 97.91666666666666%,所谓的上下文元素就是被参照的元素,我们也可以简单理解为具有特定宽度的父元素或者祖宗元素.
使用em替代像素
几年前,使用em替代px主要是为了实现文字缩放.em的实际大小是相对于上下文字体而言的.如果给body的font-size设置为100%,其他文字单位都使用相对单位em,那些文字都将受到body上初始声明的影响.现代浏览器中默认文字大小是16px,因此在body中声明以下的3条css等效:
body{
  font-size: 100%;
  font-size: 16px;
  font-size: 1em;
}

弹性图片
在IE7+实现图片随流式布局自动缩放非常简单:
img{
  max-width: 100%;
}

同理,该css属性还可以拓展到

响应式web设计

CSS教程相关栏目本月热门文章