CSS3的media的用法

来源：互联网发布：战无不胜法器进阶数据编辑：程序博客网时间：2024/06/06 06:42
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /><meta content="yes" name="apple-mobile-web-app-capable" /><meta content="black" name="apple-mobile-web-app-status-bar-style" /><meta name="format-detection" content="telephone=no" /><meta http-equiv="Expires" CONTENT="-1"><meta http-equiv="Cache-Control" CONTENT="no-cache"><meta http-equiv="Pragma" CONTENT="no-cache"><title>购物商城触屏版</title><style type="text/css">*{margin: 0;padding: 0;}.container {width: 960;margin: auto;}.wrapper {width: 740px;float: left;}#Main {width: 520px;float: right;background: yellow;}#Sub01 {width: 200px;float: left;background: orange;}#Sub02 {width: 200px;float: right;background: green;}/***/@media only screen and (min-width: 1000px) {.container {width: 1000px;}.wrapper {width: 780px;float: left;}p {line-height: 600px;text-align: center;font-weight: bold;font-size: 2em;margin: 0 0 20px 0;}#Main {width: 560px;float: right;background: yellow;}#Sub01 {width: 200px;float: left;background: orange;}#Sub02 {width: 200px;float: right;background: green;}}/***/@media only screen and (min-width: 640px) and (max-width: 999px){.container {width: 640px;}.wrapper {width: 640px;float: none;}p {line-height: 400px;}#Main {width: 420px;float: right;background: yellow;}#Sub01 {width: 200px;float: left;background: orange;}#Sub02 {width: 100%;float: none;clear: both;line-height: 150px;background: green;}}</style></head><body><div class="container"><div class="wrapper"><p id="Main">MAIN</p><p id="Sub01">Sub01</p></div><p id="Sub02">Sub02</p></div></body></html>
0 0