如何通過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寫入四個css檔案。