如何通过css的media属性，适配不同分辨率的终端设备?_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:42:121224浏览
如何通过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文件。
版权声明：本文为博主原创文章，未经博主允许不得转载。
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn