移動web——媒體查詢
阿新 • • 發佈：2018-01-15
html eight 充足 lan order 沒有 color 基本 oct
基本概念
響應式開發在沒有媒體查詢前，也可以通過js來實現，但是人們基本不會考慮，特別繁瑣。在出現了媒體查詢，才開始逐漸推廣響應式。實際開發中，在時間與金錢充足的情況下還是別做響應式，影響性能，維護麻煩。
基本使用
1、屏幕大於等於480px，使用括號裏的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @media screen and (min-width: 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-width: 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-width: 1000px) { .header{ display: none; } } .header{ width: 100%; height: 50px; border: 1px solid #304115; } </style> </head> <body> <div class="header"></div> </body> </html>
移動web——媒體查詢