Responsive Web Design CSS Media Queries

responsive-web-design

CSS3 Media Queries defines a set of rules for different media types/devices. Through CSS3 Media Query your web page is set on various devices like mobile phone, tablets, desktop etc.

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). It became a W3C recommended standard in June 2012, and is a cornerstone technology of responsive web design (RWD)

Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.

/* —— Large screens ———– */
@media only screen and (min-width : 1824px) {
/* Styles go here.. */
}

/* —— Desktops and laptops ———– */
@media only screen and (min-width : 1224px) {
/* Styles go here.. */
}

/* —— Smartphones (portrait and landscape) —– */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles go here.. */
}

/* —— Smartphones (landscape) ———– */
@media only screen and (min-width : 321px) {
/* Styles go here.. */
}

/* —— Smartphones (portrait) ———– */
@media only screen and (max-width : 320px) {
/* Styles go here.. */
}

/* —— iPads (portrait and landscape) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles go here.. */
}

/* —— iPads (landscape) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles go here.. */
}

/* —— iPads (portrait) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles go here.. */
}

/* —— iPad 3 —— */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles go here.. */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles go here.. */
}

/* —— iPhone 5 ———– */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles go here.. */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles go here.. */
}

/* —— iPhone 6 ———– */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles go here.. */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles go here.. */
}

/* —— iPhone 6+ ———– */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles go here.. */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles go here.. */
}

/* —— Samsung Galaxy S3,S4,S5 ———– */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles go here.. */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles go here.. */
}

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>