<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style > @media screen and (min-width: 680px){ 屏幕宽度大于680的布局 #div_1{ background-color: black; height: 200px; width: 200px; } } @media screen and (min-width: 480px) and (max-width: 680px){ 屏幕宽度大于480小于680的布局 #div_1{ background-color: aqua; height: 400px; width: 400px; } } @media screen and (max-width: 480px){ 屏幕宽度小于480的布局#div_1{ background-color: red; height: 400px; width: 400px; } }</style><body><div id="div_1"> </div></body></html>
简单地响应式布局----CSS3中的Media Query(媒介查询)
最新推荐文章于 2022-04-01 20:07:56 发布