|
|
@@ -0,0 +1,46 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <link rel="stylesheet" media="screen and (max-width: 600px)" href="./css/a.css">
|
|
|
+ <link rel="stylesheet" media="screen and (max-width: 900px) and (min-width: 800px)" href="./css/b.css">
|
|
|
+ <style>
|
|
|
+ .box{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+ @media screen and (max-width:500px) {
|
|
|
+ .box{
|
|
|
+ background-color: blue;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media screen and (max-width:600px) and (min-width:500px) {
|
|
|
+ .box{
|
|
|
+ background-color: yellow;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 竖屏 */
|
|
|
+ @media (orientation:portrait){
|
|
|
+ .box{
|
|
|
+ font-size: 50px;
|
|
|
+ color: aqua;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /* 横屏 */
|
|
|
+ @media (orientation:landscape){
|
|
|
+ .box{
|
|
|
+ font-size: 60px;
|
|
|
+ color: blueviolet;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <a href="https://www.runoob.com/cssref/css3-pr-mediaquery.html">文档</a>
|
|
|
+ <div class="box">hello</div>
|
|
|
+</body>
|
|
|
+</html>
|
