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


<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>

你可能感兴趣的:(前端)