怎樣通過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文件。