首页 > 代码库 > CSS3自适配手机屏幕[转]
CSS3自适配手机屏幕[转]
<!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-width: 600px) { .one { background: #F9C; } span.lt600 { display: inline-block; } } /* min-width */ @media screen and (min-width: 900px) { .two { background: #F90; } span.gt900 { display: inline-block; } } /* min-width & max-width */ @media screen and (min-width: 600px) and (max-width: 900px) { .three { background: #9CF; } span.bt600-900 { display: inline-block; } } /* max device width */ @media screen and (max-device-width: 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。