基本概念
响应式开发在没有媒体查询前，也可以通过js来实现，但是人们基本不会考虑，特别繁琐。在出现了媒体查询，才开始逐渐推广响应式。实际开发中，在时间与金钱充足的情况下还是别做响应式，影响性能，维护麻烦。
基本使用
1、屏幕大于等于480px，使用括号里的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @media screen and (min- 480px) { body { background-color: black; } } </style> </head> <body> </body> </html>
2、屏幕小于等于1000px，使用括号里的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @media screen and (max- 1000px) { body { background-color: black; } } </style> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @media screen and (max- 1000px) { .header{ display: none; } } .header{ width: 100%; height: 50px; border: 1px solid #304115; } </style> </head> <body> <div class="header"></div> </body> </html>