Home > Developer > Web Develop
Nowadays, more mobile phones and tablets are being asked every day. Consumers have the ability to imagine a variety of specifications and shapes, but web developers face a challenge: how to make their websites look good on traditional browsers, mobile phones, and tablet browsers, and how to provide a first-class user experience on screens of all sizes, the answer is: responsive design . Responsive design can vary depending on the screen size displayed. The main way to implement responsive design is to use CSS media queries. --Excerpt from Ibmdeveloperworks
I believe that many people know bootsrap this response framework, in short, the framework according to different resolutions to provide a very friendly browsing experience, the core of which is the media query @media.
How do I use it?
@media (min-width:800px) {...}
This is a basic media query statement, @media can be seen as if
If the condition after the @media is satisfied, the statement that follows the curly brace is executed.
Simple attempt
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title></Head><style> *{margin:0;padding:0; }. Header{Background-color:Red;width:100%;Height:40px; }@media (min-width:500px){. header{Background-color:Blue; } }</style><Body><Divclass= "header"></Div></Body></HTML>
@media (min-width:500px) starts here to determine the current resolution, if the minimum resolution is 500px (resolution above 500px)
The background color of the header changes to blue, which is equivalent to overriding the Background-color property.
Please try other properties such as Width,block and more.
Making responsive navigation
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title>Media Enquiry</title> <Scriptrel= "Script"src= "Jquery.min.js"></Script> <Script>$ (document). Ready (function () { $("a"). Click (function(){ $("Li"). Toggle (); }) }) </Script> <style> *{margin:0;padding:0; }#header{width:100%;Background-color:#4db14d;Height:40px; }ul{ }Li{float: Left;List-style:None;width:80px;Display:Block;Padding-top:10px;Color:#fff;Background-color:#4db14d;text-align:Center; }a{Padding-top:10px;Padding-bottom:10px;Color:#fff;Display:None;width:100%;text-align:Center; }@media (max-width:520px){li{Width:100%;Border-top:1px solid #1b961b;Padding-bottom:10px;Display:None; }a{Display:Block; } } </style></Head><Body><DivID= "header"> <a>Fuck</a> <ul> <Li>Test 1</Li> <Li>Test 2</Li> <Li>Test 3</Li> <Li>Test 4</Li> <Li>Test 5</Li> <Li>Test 6</Li> </ul></Div></Body></HTML>
In the navigation, there must be an icon (low resolution) to expand the menu in addition to the menu, so we can write it first and hide it when we make it.
All we do is determine the resolution, and if the resolution is a little more than a certain value, then hide the menu and display it using a menu mutation.
Note that I have a small resolution, the menu width is set to 100%, easy to use experience. You can try a better approach.
Then use jquery to show/hide the menu or menu icon
In addition, there can be more judgments, such as: Resolution between 800-1200 (min-width:800px) and (max-width:1200px)
@media (min-width:800px) and (max-width:1200px) {...}
For more media enquiries, please click here.
Get started with CSS3 media queries and make your own responsive navigation
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
