標籤：style blog class code java ext
<!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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
