ホームページ >ウェブフロントエンド >htmlチュートリアル >css?_html/css_WEB-ITnose の media 属性を通じて異なる解像度の端末に適応する方法
css の media 属性を通じて異なる解像度の端末に適応する方法の例は次のとおりです:
<!DOCTYPE html><html> <head> <title>首页</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style> @media (max-width:768px) { #div1 { width: 400px; margin: 0 auto; background:url('../img/1.JPG'); } #img2,#img3 { width: 100px; } } @media (min-width:768px) { #div1 { width: 600px; margin: 0 auto; background:url('../img/1.JPG'); } #img2,#img3 { width: 200px; } } @media (min-width:992px) { #div1 { width: 800px; margin: 0 auto; background:url('../img/1.JPG'); } #img2,#img3 { width: 300px; } } @media (min-width:1200px) { #div1 { width: 1000px; margin: 0 auto; background:url('../img/1.JPG'); } #img2,#img3 { width: 400px; } } </style> </head> <body> <div id="div1"> <img id="img2" alt="img2" src="../img/2.JPG"> <img id="img3" alt="img3" src="../img/3.JPG"> </div> </body></html>
もちろん、端末の解像度の変更に応じて別の CSS ファイルを参照することもできます。
<!DOCTYPE html><html> <head> <title>首页</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="(max-width: 768px)" href="../css/max-768px.css"> <link rel="stylesheet" media="(min-width: 768px)" href="../css/min-768px.css"> <link rel="stylesheet" media="(min-width: 992px)" href="../css/min-992px.css"> <link rel="stylesheet" media="(min-width: 1200px)" href="../css/min-1200px.css"> </head> <body> <div id="div1"> <img id="img2" alt="img2" src="../img/2.JPG"> <img id="img3" alt="img3" src="../img/3.JPG"> </div> </body></html>
注: 最初のファイルの ccs を 4 つの css ファイルに書き込むだけで済みます。
著作権声明: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。