How to use the media properties of CSS, suitable for different resolutions of the terminal equipment, examples are as follows:
<! DOCTYPE html><html> <head> <title>Home</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: px; margin: 0 auto; background:url ('.. /img/1.jpg '); } #img2,#img3 { width: + px; }}@Media (min-width:768px){#div1 { width: + px; margin: 0 auto; background:url ('.. /img/1.jpg '); } #img2,#img3 { width: px; }}@Media (min-width:992px){#div1 { width: + px; margin: 0 auto; background:url ('.. /img/1.jpg '); } #img2,#img3 { width: px; }}@Media (min-width:px){#div1 { width: + px; margin: 0 auto; background:url ('.. /img/1.jpg '); } #img2,#img3 { width: px; }}</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 refer to different CSS files according to the change of the terminal resolution, examples are as follows:
<! DOCTYPE html><html> <head> <title>Home</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 can be written to four CSS files.
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
How to use the media properties of CSS to adapt to different resolutions of terminal devices?