Home > Article > Web Front-end > How to adapt to terminal devices with different resolutions through the media attribute of css?_html/css_WEB-ITnose
How to adapt to terminal devices with different resolutions through the media attribute of css?_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:121173browse
How to adapt to terminal devices with different resolutions through the media attribute of css. The example is as follows:
<!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> Of course, you can also reference different devices according to the change of terminal resolution. css file, the example is as follows:
<!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>
Note: Only the ccs in the first file needs to be written into four css files.
Copyright Statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS changes font underline color_html/css_WEB-ITnoseNext article：CSS changes font underline color_html/css_WEB-ITnose