Home > Developer > Web Develop
HTML5/CSS3 Responsive layout Introduction and design process, using CSS3 Media query function. Mobile terminals are generally good for CSS3. Advanced browsers do not need to consider a responsive layout for media query compatibility issues
The media property is followed by a screen type. The condition is then concatenated with the and keyword, followed by a media query, which means that the style sheet is activated at a resolution greater than 600 and less than 960.
HTML code Demo (method one):
1 <! DOCTYPE html>2 3 4 <meta charset= "UTF-8" >5 <title> Responsive </title>6 <style>7 . Box{8 margin:Auto;9}Ten . Box>div:nth-child (1){ One Background-color:Red; A} - . Box>div:nth-child (2){ - Background-color:Orange; the} - . Box>div:nth-child (3){ - Background-color:Yellow; -} + . Box>div:nth-child (4){ - Background-color:Green; +} A . Box>div:nth-child (5){ at Background-color:Skyblue; -} - . Box>div:nth-child (6){ - Background-color:Mediumpurple; -} - @media screen and (max-width:1200px){ in . box{ - width:500px; to Outline:1px solid; +} - . Box>div{ the width:50%; * Height:100px; $ float: Left;Panax Notoginseng} - } the @media screen and (max-width:800px){ + . box{ A width:250px; the} + . Box>div{ - width:100%; $ Height:100px; $} - } - </style> the - <body>Wuyi <div class= "box" > the <div></div> - <div></div> Wu <div></div> - <div></div> About <div></div> $ <div></div> - </div> - </body> -
HTML code Demo (method two):
1 <! DOCTYPE html>2 3 4 <meta charset= "UTF-8" >5 <title> responsive layouts </title>6 <style>7 . Box{8 margin:Auto;9}Ten . Box>div:nth-child (1){ One Background-color:Red; A} - . Box>div:nth-child (2){ - Background-color:Orange; the} - . Box>div:nth-child (3){ - Background-color:Yellow; -} + . Box>div:nth-child (4){ - Background-color:Green; +} A . Box>div:nth-child (5){ at Background-color:Skyblue; -} - . Box>div:nth-child (6){ - Background-color:Mediumpurple; -} - . Box1{ in width:500px; -} to . Box1>div{ + width:50%; - Height:100px; the float: Left; *} $ . Box2{Panax Notoginseng width:250px; -} the . Box2>div{ + width:100%; A Height:100px; the} + @media screen and (max-width:1200px){ - . box2{ $ Display:None; $} - } - @media screen and (max-width:800px){ the . box2{ - Display:Block;Wuyi} the . Box1{ - Display:None; Wu} - } About $ </style> - - <body> - <div class= "box box1" > A <div></div> + <div></div> the <div></div> - <div></div> $ <div></div> the <div></div> the </div> the <div class= "box Box2" > the <div></div> - <div></div> in <div></div> the <div></div> the <div></div> About <div></div> the </div> the </body> the
The effect is as follows (both methods are implemented as shown above):
The other size of the same operation, of course, this is the simplest way, or there are many other ways to achieve. For example, with the framework, JQ JS can also.
Always encourage yourself to:
Immersed in reading, head up a man!
Do not climb mountains do not know the sky high also, not the Deep brook not know the thick Also
Cowardly people will only be deterred, reckless people can only be cited as the burning body, only the truly courageous people can be invincible
In our world, we never give medals to a sad, outdated person.
The character of the waves is the countless times the reef is shattered and countless flash to the reef,
The soles were worn, not equal to the road to the head.
Loose the strings, never play the strong voice of the times.
The person lying in the quilt does not feel the warmth of the sun.
Not complacent, not willing to mediocrity, it may be in the courage to forge ahead in the struggle to play the magnificent life of the music room.
Not to cultivate, not to sow, and then fat fertile soil also long not to grow crops, not to struggle, not to create, and then the United States of youth can not bear fruit.
(Small little Tail/original)
HTML5 responsive Layout (media query)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
