css网页内容像素随着浏览器变化而相应的变化
发布网友
发布时间：2022-04-06 12:17
共1个回答
热心网友
时间：2022-04-06 13:46
你的这个需求叫做“响应式设计”，可以使用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%; }
}
