标签：
HTML代码部分
<html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>rem测试</h1> <div class="footer"> <div><img src="xxh1.jpg" /><a>尽显权威专业</a></div> <div>国际特色<br/>安全体系</div> <div>学术研讨<br/>把脉国际<br/>健康动态</div> <div><img src="xxh2.jpg" /></div> <div>尖端设备<br/>全面助力<br/>提升能力</div> </div> </body> </html>
css代码部分
/*css*/ @charset "utf-8"; a { text-decoration: none; color: #000000;} *{margin:0px;padding:0px;} body{color:#000000;max-width:1440px;min-width:320px;margin:0 auto;height:1000px;} ul,ol,li{list-style-type:none;} .clear{clear:both;} html{font-size:14px;}/*有无没有影响*/ @charset "utf-8"; a { text-decoration: none; color: #000000;} /**判断屏幕尺寸start**/ @media only screen and (min-width: 1px) and (max-width: 320px){ html{font-size:10px;} } @media only screen and (min-width: 321px) and (max-width:639px){ html{font-size:11px;} } @media only screen and (min-width: 640px) and (max-width:1440px){ html{font-size:20px;} } /**判断屏幕尺寸end**/ h1{font-size:30px;font-weight:normal;width:100%;text-align:center;margin-bottom:1rem;} p{font-size:1rem;} .footer{width:100%;height:auto;margin-left:0.75rem;} .footer div{float:left;} .footer div:nth-child(1){width:22.75rem;height:7.2rem;margin-right:0.55rem;margin-bottom:0.55rem;position:relative;} .footer div:nth-child(1) a{display:block;height:1.95rem;background:rgba(0,0,0,0.5);width:22.75rem;position:absolute;bottom:0rem;text-align:center;line-height:1.95rem;color:#fff;font-size:0.9rem;} .footer div:nth-child(1) img{max-width:100%;width:100%;} .footer div:nth-child(2),.footer div:nth-child(3),.footer div:nth-child(5){width:5.4rem;height:4.9rem;background:#ccc;margin-bottom:0.55rem;font-size:0.9rem;color:#fff;line-height:1.4rem;padding:2.3rem 0 0 1.8rem;} .footer div:nth-child(4){width:15.1rem;height:7.2rem;margin:0 0.55rem;} .footer div:nth-child(4) img{max-width:100%;width:100%;} #z{width:20rem;border:1px solid green;height:20rem;} #z1{width:100px;border:1px solid #ccc;10px;height:100px;}
标签：
原文地址：http://www.cnblogs.com/dream-w/p/4894318.html
