Heim > Artikel > Web-Frontend > 如何通过css的media属性，适配不同分辨率的终端设备?_html/css_WEB-ITnose
如何通过css的media属性，适配不同分辨率的终端设备?_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:121173Durchsuche
如何通过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文件。
版权声明：本文为博主原创文章，未经博主允许不得转载。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS改变字体下划线颜色_html/css_WEB-ITnoseNächster Artikel：清除浮动全面解读（摘自网摘那些年我们一起清除过的浮动）_html/css_WEB-ITnose