使用CSS3的@media来实现网页自适应

来源：互联网发布：女鞋淘宝英文店名编辑：程序博客网时间：2024/05/17 04:20

<!doctype html><html><head><meta charset="utf-8"><title>流体布局自适应</title><style type="text/css">  *{    padding:0 auto;    margin:0 auto;  } @media screen and (min-width: 1201px) { .naavp { color:#000 !important;} body{background:green;}.two{ display:none;  }  .one{ display:block;  } } /* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ @media screen and (max-width: 1200px) { .naavp { color:#000 !important;} .two{ display:none;  }body{background:red;}.one{ display:block;  } } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ @media screen and (max-width: 900px) { .one{ display:none;  } body{background:yellow;}  body{background:pink;}.two{ display:block;  } } /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */ @media screen and (max-width: 500px) { .one{ display:none;  } .two{ display:block;  } } /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */   </style></head><body></body></html>

阅读全文

0 0