媒体查询
-
实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <link rel="stylesheet" href="./zig.css"> <style> #s{ height: 100px; width: 200px; background-color: cadetblue; } /* 媒体查询 最小最大屏幕尺寸 */ @media screen and (min-device-width: 300px) and (max-device-width:600px) { #s { background-color: chartreuse; } } @media screen and (min-device-width: 601px) and (max-device-width:1000px) { #s { background-color: red; } } </style> </head> <body> <div id="s"></div> </body> </html>
-
常用参数
1. max-width, min-width: 最大最小浏览器可视宽度 2. max-device-width, min-device-width: 最大最小设备屏幕宽度
-
媒体引入
<style media="(min-device-width: 200px) and (max-device-width:299px)"> #s { background-color: cornflowerblue; } </style>
<link rel="stylesheet" href="./zig.css" media="(min-device-width: 200px) and (max-device-width:299px)">