Recently I wrote about the fundamentals of responsive web design, and how important it was to acknowledge that it wasn?t going away.
When CSS3 became available, it introduced a concept called media queries ? which allows presentations to be tailored to a specific range of devices without changing the content itself.
In layman?s terms, this gives us a chance to represent our website in different ways depending on the device that is used for viewing. Whether it be an iPad, iPhone or any other tablet or smart phone, you have the capability of serving up a better viewing experience to your visitors.
Implementing Media Queries
Before I get into the types of media queries that are available, you?ll need a method for detecting the device that is being used for viewing. Thankfully, Apple is smart and came up with the Viewport meta tag which we can use.
If you are using the Genesis Framework to power your website, there?s an easy way to implement this so that it loads properly in the head section of your source code.
Simple place the following code into your child theme?s functions.php file:
/** Add Viewport meta tag for mobile browsers */ add_action( 'genesis_meta', 'add_viewport_meta_tag' ); function add_viewport_meta_tag() { echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>'; }In Genesis 1.9 we will be adding a brand new Genesis Responsive function which will use add_theme_support to replace the method above as well as introduce a number of other extremely cool mobile-friendly features.
Now that you have the Viewport meta tag added to your head, now we can move forward with understanding the various types of media queries and how they can be used.
Types of Media Queries
I have a tremendous amount of respect for designer Chris Coyier, so I am going to be unoriginal and rely on his knowledge to present the various types of media queries. Props also goes out to Andy Clark for his hard work which served as the source for the snippets that Chris used.
Thanks to them, we have a an elegant roadmap to using media queries for standard devices. Below are the snippets of CSS that should be added to your theme?s style sheet.
Currently we place them at the bottom of the child theme?s style.css file, but the upcoming Genesis Responsive function will load a responsive.css file if it exists in the theme folder.
Smartphones (portrait and landscape)
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* Styles */ }Smartphones (landscape)
/* Smartphones (landscape) ----------- */ @media only screen and (min-width: 321px) { /* Styles */ }Smartphones (portrait)
/* Smartphones (portrait) ----------- */ @media only screen and (max-width: 320px) { /* Styles */ }iPads (portrait and landscape)
/* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* Styles */ }iPads (landscape)
/* iPads (landscape) ----------- */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { /* Styles */ }iPads (portrait)
/* iPads (portrait) ----------- */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* Styles */ }Desktops and laptops
/* Desktops and laptops ----------- */ @media only screen and (min-width: 1224px) { /* Styles */ }Large screens
/* Large screens ----------- */ @media only screen and (min-width: 1824px) { /* Styles */ }iPhone 4
/* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }The snippets above are merely examples of using media queries for standard mobile devices. You can target general screen viewing areas by changing max-device-width to max-width.
Here?s a list of resources that I found useful while doing research on media queries:
Source: http://www.briangardner.com/media-queries/
jessica biel donald trump ipad mini Kevin Krim Autumn Pasquale ann coulter msnbc
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন