如何通过css的media属性，适配不同分辨率的终端设备?_html/css

如何通过css的media属性，适配不同分辨率的终端设备?_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-24 11:42:12

original

1194 Les gens l'ont consulté

如何通过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>

Copier après la connexion

当然，也可以根据终端分辨率的变化去引用不同的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>

Copier après la connexion

注意: 只需要将第一个文件里面的ccs写入四个css文件。