CSS Media Queries

Types of media types:

Syntax

@media <media-query> { /* media-specific rules */ }

A <media-query> is composed of a media type and/or a number of media features.

Media types

Note: Firefox currently only implements the print and screen media types.  The FullerScreen extension enables support for the projection media type.
all
Suitable for all devices.
print
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.
screen
Intended primarily for color computer screens.
speech
Intended for speech synthesizers. Note: CSS2 had a similar media type called ‘aural’ for this purpose. See the appendix on aural style sheets for details.

Steps:

1. <meta name=”viewport” content=”user-scalable=no,width=device-width, minimum-scale=1, maximum-scale=1″ />

width=device-width

this means we are telling to the browser “my website adapts to your device width”

Initial-scale

This define scale the website, This parameter sets the initial zoom level, which means if 1 CSS pixel is equal to 1 view port pixel. This parameter help to when you changing orientation mode, or preventing a default zooming. without this parameter responsive site work.

Maximum-scale

Maximum-scale define maximum zoom. When you access website top priority is maximum-scale=1 won’t allow the user to zoom.

Minimum-scale

Minimum-scale define minimum zoom. this work same as above but define minimum scale. If you not define this its work without using this is useful when maximum scale is large and you want to set minimum scale that time you can use.

User-scalable

User-scalable assign 1.0 means website allow to zoom in or zoom out.

But if you assign User-scalable=no its means website not allow to zoom in or zoom out.

10-10-2014 13-06-08

More: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

 

2.<link rel=stylesheet media=(max-width: 800px) href=example.css />

3. Add media type with screen/all/speech/print with following syntax

Eg: media all

@media all and (min-width: 1001px) {

#sidebar ul li a:after {

content: ” (“ attr(data-email) “)”;

font-size: 11px;

font-style: italic;

color: #666;

}

}

4. similarly for screen

@media only screen and (min-width: 768px) and (max-width: 1024px) {

(or)

@media only screen and (max-width: 766px) {

(or)

@media only screen and (max-width: 360px)

(or)

@media screen and (max-width : 479px) {

(or)

@media only screen and (min-width: 480px) and (max-width: 766px) {
#slide6 {padding-top:123px;background:url(../images/contact_block_bg.jpg) repeat left top;}

}

5. Even we can have orientation landscape/ portrait like below

@media only screen and (max-width: 1024px) and (orientation:portrait){
.slide{background-attachment: scroll;background-position:0 0 !important;
.isologo{
float:right;
}
}

}

@media only screen and (max-width: 1024px) and (orientation:landscape){
.slide{background-attachment: scroll;background-position:0 0 !important;
.isologo{
float:right;
}
}

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s