代码:
<!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>Document</title> <style> /* 屏幕宽度在1366px以下 */ @media(max-width:1366px){ .box{ width: 300px; height: 300px; background-color: pink; } } /* 屏幕宽度在1367px-1600px */ @media(min-width:1367px) and (max-width:1600px){ .box{ width: 500px; height: 500px; background-color: green; } } /* 屏幕宽度在1601px以上 */ @media(min-width:1601px){ .box{ width: 700px; height: 700px; background-color: orange; } } </style> </head> <body> <div class="box"></div> </body> </html>
效果图:
移动web-PC端媒体适配-rem
最新推荐文章于 2023-11-10 14:34:35 发布