How to adapt to terminal devices with different resolutions through the media attribute of css?_html/css

How to adapt to terminal devices with different resolutions through the media attribute of css?_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2016-06-24 11:42:12

Original

1242 people have browsed it

How to adapt to terminal devices with different resolutions through the media attribute of css. The example is as follows:

<!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>

Copy after login

Of course, you can also reference different devices according to the change of terminal resolution. css file, the example is as follows:

<!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>

Copy after login

Note: Only the ccs in the first file needs to be written into four css files.

Copyright Statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.