<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <title>Media Query Demos【CSS3自适配手机屏幕】</title> <style type="text/css"> .wrapper { border: solid 1px #666; padding: 5px 10px; margin: 40px; } .viewing-area span { color: #666; display: none; } /* max-width */ @media screen and (max- 600px) { .one { background: #F9C; } span.lt600 { display: inline-block; } } /* min-width */ @media screen and (min- 900px) { .two { background: #F90; } span.gt900 { display: inline-block; } } /* min-width & max-width */ @media screen and (min- 600px) and (max- 900px) { .three { background: #9CF; } span.bt600-900 { display: inline-block; } } /* max device width */ @media screen and (max-device- 480px) { .iphone { background: #ccc; } } </style> </head> <body> <div class="wrapper one">此框会变成粉红色，如果可视面积小于600px</div> <div class="wrapper two">此框会变成橙色，如果可视面积小于900px</div> <div class="wrapper three">此框会变成蓝色，如果可视面积为600px~900px</div> </body> </html>
CSS3自适配手机屏幕
http://hi.baidu.com/58zhongguo/item/c4da7bd761d22bc71a72b4d0?qq-pf-to=pcqq.c2c