css3(media) 识别不同设备

https://www.queness.com/post/17491/how-to-transform-into-different-apple-devices-with-just-css3

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3 识别不同设备</title> <meta name="description" content="A demostration and experiment on how to transform from iMac, to Macbook, iPad, iPhone and Apple Watch."/>   <style type="text/css"> /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } h1.heading, h2.heading { font-size: 30px; text-transform: uppercase; font-family: 'Roboto'; color: #fff; text-align: center; padding: 0 10%; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } h2.heading { font-size: 24px; display: none; } hr { border: 0; border-top: 1px solid #fff; height: 0; width: 55%; } * { transition: all .5s ease; box-sizing: border-box; } body { background: #5cc9df; } .container { width: 80%; max-width: 1200px; margin: 20px auto; } h2.desktop { display: block; } /* iMac */ .outer-frame { position: relative; transform-style: preserve-3d; } .outer-frame .frame { background: #e8eaef; width: 100%; padding-top: 65%; border-radius: 30px; position: relative; text-align: center; } .outer-frame .frame:before { content: ''; display: inline-block; width: 6px; height: 6px; color: #a5a5a5; position: absolute; top: 2%; left: 50%; margin-left: -3px; z-index: 10; background: #a5a5a5; border-radius: 15px; } .outer-frame .frame .panel { background: #363b46; width: 100%; padding-top: 55%; border-radius: 25px 25px 0 0; position: absolute; top: 0; left: 0; } .outer-frame .frame .panel .screen { width: 100%; height: 55%; position: absolute; top: 0; left: 0; padding: 3%; } .outer-frame .frame .panel .screen:before { content: ''; display: inline-block; background: #4b5362; width: 100%; padding-top: 52%; } .outer-frame .bottom { background: #e8eaef; width: 25%; padding-top: 11%; margin: -1.2% auto 0 auto; position: relative; transform: perspective(250px) rotateX(25deg); } .outer-frame .bottom:before { padding-top: 9%; width: 100%; position: absolute; top: 0; left: 0; content: ''; display: block; background: #d8dae1; } .outer-frame .stand { background: #e8eaef; width: 33%; padding-top: 3%; margin: -1% auto 0 auto; position: relative; transform: perspective(100px) rotateX(70deg); border-radius: 10px; opacity: 1; } .outer-frame .stand:after { content: ''; display: block; position: absolute; bottom: -8px; width: 100%; height: 20px; background: #d8dae1; transform: perspective(90px) rotateX(135deg); } /* Macbook */ @media (min-width: 1025px) and (max-width: 1440px) { h2.desktop { display: none; } h2.laptop { display: block; } .outer-frame { position: relative; transform-style: preserve-3d; } .outer-frame .frame { padding-top: 55%; border-radius: 25px; } .outer-frame .bottom { width: 110%; padding-top: 3%; position: relative; top: 10px; margin-left: -5%; transform: perspective(300px) rotateX(0deg); border-radius: 0 0 25px 25px; opacity: 1; } .outer-frame .bottom:before { padding-top: 1%; width: 15%; margin: 0 auto; position: absolute; top: 0; left: 50%; margin-left: -7.5%; border-radius: 0 0 10px 10px; opacity: 1; } .outer-frame .stand { opacity: 0; transform: perspective(0) rotateX(0); } } /* Landscape iPad */ @media (min-width: 768px) and (max-width: 1024px) { h2.desktop { display: none; } h2.tablet-l { display: block; } .outer-frame { position: relative; transform-style: preserve-3d; } .outer-frame .frame { padding-top: 65%; border-radius: 20px; } .outer-frame .frame:before { top: 50%; left: 2.6%; margin-left: 0; } .outer-frame .frame .panel { padding-top: 65%; border-radius: 20px 20px 20px 20px; } .outer-frame .frame .panel .screen { padding: 3.5% 7%; } .outer-frame .frame .panel .screen:before { padding-top: 66%; } .outer-frame .bottom { border-radius: 30px; transform: perspective(0) rotateX(0); width: 5%; padding-top: 5%; position: absolute; top: 50%; margin-top: -2.5%; right: 1%; } .outer-frame .bottom:before { opacity: 0; } .outer-frame .stand { opacity: 0; } } /* Portrait iPad */ @media (min-width: 500px) and (max-width: 767px) { h2.desktop { display: none; } h2.tablet-p { display: block; } .outer-frame .frame { padding-top: 130%; } .outer-frame .frame:before { top: 2.6%; left: 50%; margin-left: -3px; } .outer-frame .frame .panel { padding-top: 130%; border-radius: 20px 20px 20px 20px; } .outer-frame .frame .panel .screen { padding: 8.5% 3.5%; } .outer-frame .frame .panel .screen:before { padding-top: 120%; } .outer-frame .bottom { border-radius: 30px; transform: perspective(0) rotateX(0); width: 7%; padding-top: 7%; position: absolute; top: auto; bottom: 2.5%; right: 50%; margin-top: 0; margin-right: -3.5%; } .outer-frame .bottom:before { opacity: 0; } .outer-frame .stand { opacity: 0; } } /* Portrait iPhone */ @media (min-width: 401px) and (max-width: 499px) { h2.desktop { display: none; } h2.phone { display: block; } .outer-frame .frame { padding-top: 190%; border-radius: 35px 35px 35px 35px; } .outer-frame .frame:before { top: 3.5%; left: 50%; margin-left: -12%; } .outer-frame .frame:after { position: absolute; top: 3.5%; left: 50%; margin-left: -7.5%; width: 15%; padding-top: 2%; background: #a8a7a7; content: ''; display: block; border-radius: 10px; } .outer-frame .frame .panel { padding-top: 190%; border-radius: 35px 35px 35px 35px; } .outer-frame .frame .panel .screen { padding: 14% 3.5%; } .outer-frame .frame .panel .screen:before { padding-top: 170%; opacity: 1; } .outer-frame .bottom { border-radius: 30px; transform: perspective(0) rotateX(0); width: 12%; padding-top: 12%; position: absolute; top: auto; bottom: 2.5%; right: 50%; margin-top: 0; margin-right: -6%; } .outer-frame .bottom:before { opacity: 0; } .outer-frame .stand { opacity: 0; } } /* Watch */ @media (max-width: 400px) { h2.desktop { display: none; } h2.wearable { display: block; } .outer-frame { position: relative; transform-style: preserve-3d; width: 60%; margin: 0 auto; text-align: center; } .outer-frame .frame { background: #e8eaef; padding-top: 110%; border-radius: 30px; position: relative; text-align: center; } .outer-frame .frame:before { content: ''; display: inline-block; width: 7px; height: 30px; color: #a5a5a5; position: absolute; top: 20%; left: auto; right: -7px; margin-left: 0; z-index: 10; background: #e8eaef; border-radius: 0 5px 5px 0; } .outer-frame .frame:after { content: ''; display: inline-block; width: 5px; padding-top: 48%; color: #a5a5a5; position: absolute; top: 40%; left: auto; right: -5px; margin-left: 0; z-index: 10; background: #e8eaef; border-radius: 0 5px 5px 0; } .outer-frame .frame .panel { background: #e8eaef; width: 100%; padding-top: 110%; border-radius: 30px; position: absolute; top: 0; left: 0; text-align: center; } .outer-frame .frame .panel .screen { width: 95%; position: absolute; top: 2.5%; left: 2.5%; padding-top: 101%; background: #333333; border-radius: 30px; } .outer-frame .frame .panel .screen:before { opacity: 0; } .outer-frame:before { background: #e8eaef; width: 70%; padding-top: 50%; margin: 0 auto 0 auto; position: relative; bottom: -5px; transform: perspective(250px) rotateX(25deg); border-radius: 15px 15px 0 0 ; content: ''; display: inline-block; } .outer-frame .bottom { background: #e8eaef; width: 70%; padding-top: 50%; margin: -1.2% auto 0 auto; position: relative; transform: perspective(250px) rotateX(-25deg); border-radius: 0 0 15px 15px; } .outer-frame .bottom:before { opacity: 0; } .outer-frame .stand { opacity: 0; } } </style> </head> <body> <h1 class="heading">改变窗口大小查看效果</h1> <hr /> <h2 class="heading desktop">iMac / Desktop</h2> <h2 class="heading laptop">Macbook / Laptop</h2> <h2 class="heading tablet-l">iPad (Landscape) / Tablet</h2> <h2 class="heading tablet-p">iPad (Portrait) / Tablet</h2> <h2 class="heading phone">iPhone / Phone</h2> <h2 class="heading wearable">Watch / Wearable</h2> <div class="container"> <div class="outer-frame"> <div class="frame"> <div class="panel"> <div class="screen"></div> </div> </div> <div class="bottom"></div> <div class="stand"></div> </div> </div>  </body> </html>

提示：你可以先修改部分代码再运行。