css?_html/css_WEB-ITnose の media 属性を通じて異なる解像度の端末に適応する方法-htmlチュートリアル-php.cn

css?_html/css_WEB-ITnose の media 属性を通じて異なる解像度の端末に適応する方法

WBOY

リリース： 2016-06-24 11:42:12

オリジナル

1193 人が閲覧しました

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 ファイルに書き込むだけで済みます。

著作権声明: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。