CSS media query is an important part of responsive design that helps you achieve a more flexible mobile design.
See Sample code Ch01r06_c.html
<!DOCTYPE HTML><HTML> <Head> <title>Mobile Cookbook</title> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0"> <Scriptsrc= "Modernizr-1.7.min.js"></Script> <style>Body{margin:0;padding:0;background:#FFFFA6; }#main Section{Display:Block;Border:5px Solid #29D9C2;width:60%;Height:120px;margin:5% Auto; }@media screen and (min-width:480px){#main {width:90%;margin:0 Auto; }#main > Section:first-child{Margin-right:5%; }#main Section{float: Left;width:45%; } } </style> </Head> <Body> <DivID= "Container"> <DivID= "Main"> < SectionID= "Top-news"></ Section> < SectionID= "Sports"></ Section> </Div> </Div> </Body></HTML>
In a narrow screen, these two sections are arranged vertically, and are arranged horizontally in widescreen, which is the function of CSS media query. In the example, @media screen and (min-width:480px) {...} Style is enabled on screens with widths above 480px.
：
Desktop-First Site
In addition to creating purely desktop sites or purely mobile sites, we have other ways of building the desktop, which is to prioritize desktops and gracefully downgrade on mobile devices.
Mobile first Site
Another way is to move first, and gracefully downgrade on desktop devices. This way you can use the following CSS:
@media only screen and (min-width:320px) {
/* Styles */
}
@media only screen and (min-width:640px) {
/* Styles */
}
@media only screen and (min-width:800px) {
/* Styles */
}
@media only screen and (min-width:1024px) {
/* Styles */
}
One-Stop way
Another way to do this is to create only one website and take care of both mobile and desktop devices instead of focusing on one.
HTML5 Mobile Web Development (v)--CSS Media query of mobile design
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
