Question

css网页内容像素随着浏览器变化而相应的变化

网页默认的内容宽度 1200px
当浏览器窗口为1600px时，内容宽度变成1100px
当浏览器窗口为1400px时，内容宽度变成1000px
当浏览器窗口为1280px时，内容宽度变成950px。
学习中的新人请求教一教，CSS代码什么写？

Answer 1

你的这个需求叫做“响应式设计”，可以使用CSS3的媒体查询来实现（IE8及更老的浏览器需用Respond.js插件来兼容）。具体代码和注释如下：

/*默认宽度为1200px*/
body {
  width: 1200px;
}
/*小于1600px时宽度为1100px*/
@media screen and (max-width: 1600px){
  body { width:1100px; }
}
/*小于1400px时宽度为1000px*/
@media screen and (max-width: 1400px){
  body { width:1000px; }
}
/*小于1280px时宽度为950px*/
@media screen and (max-width: 1280px){
  body { width:950px; }
}
/*小于950px时宽度为100%*/
@media screen and (max-width: 950px){
  body { width:100%; }
}