CCS3 @media Implementing responsive layouts

Media query is a new feature in CSS3 that allows a piece of CSS code to take effect under certain conditions through the @media rule.

What do you mean?

Look at the code below

@media (max-width:320px) {#footer {font-size:13px; }}

Only if the browser width is less than 320px, #footer的字体大小才会设置为13px

--------------------------

Previously we might have to set up CSS files for different devices such as Desktop/mobile, respectively.

So now look at using @media to do that.

/* For desktop: */.col-1 {width:30%;}. Col-2 {width:10%;}. col-3 {width:20%;}. col-4 {width:40%;}    @media (max-width:768px) {/* for mobile phones: */[class*= "col-"] {width:100%; }}

is not a lot of convenience, so you can put all the styles in a document.

---------------------

Very simple is not, there are a few caveats to remind everyone

1. Phone style first

   means that the phone style is written in front of the desktop or other device style, which can improve rendering speed on small devices

   The above example should be written like this

/* For mobile phones: */[class*= "col-"] {width:100%;}    @media (min-width:768px) {/* for desktop: */. col-1 {width:30%;}    . col-2 {width:10%;}    . col-3 {width:20%;} . col-4 {width:40%;}}

Load the phone style first, loading the desktop style when the screen width is greater than 768

You may also want to add a style to a variety of devices, see the following example

/* For mobile phones: */[class*= "col-"] {width:100%;}    @media (min-width:768px) and (max-width:998px) {/* for tablets: */. col-1 {width:25%;}    . col-2 {width:10%;}    . col-3 {width:15%;} . col-4 {width:30%;}}    @media (MIN-WIDTH:999PX) {/* for desktop: */. col-1 {width:30%;}    . col-2 {width:10%;}    . col-3 {width:20%;} . col-4 {width:40%;}}

2. You can also set the horizontal screen/vertical screen of the handheld device

Like setting a horizontal screen style for your phone

@media screen and (Orientation:landscape) and (MAX-WIDTH:767PX)

Setting the vertical screen style

@media screen and (orientation:protrait) and (MAX-WIDTH:767PX)

3. Resolution partition of a point of recommendation

Small devices such as mobile phones: 320px ~ 479px

Big screen Mobile: 480px ~ 767px

Tablet device: 768px ~ 1024px

Large Tablet and PC equipment: greater than 1025px

This article is from the "Dark Forest" blog, so be sure to keep this source http://mysens.blog.51cto.com/10014673/1769078

CCS3 @media Implementing responsive layouts