@Media Queries and Responsive Design
Responsive Web Design:
Responsive design is a technique that creates content that can be viewed differently based on the device that the person is using. This response is based on screen size, pixel density, screen orientation, and device size. With a responsive design the webpage should change design elements depending on what the device requirements are. This allows the webpage to respond to the users specifications and preferences.
jQuery (.Width) Command:
If a designer does not know what the device with is that they are currently viewing on, they can use a jQuery command to discover it. This command is the (.width) command. In order to see what the device width of the current location you are in, you can use the jQuery command:
$(this).width
or
$(document).width
If you use the “this” qualifier, you will be referring to the DIV you are currently in. If you instead want to use the “document” qualifier instead of “this”, it will tell you the width of the entire document or page you are on and not just the DIV you are in.
@Media Queries:
The way that you are able to get your website to be responsive is to use @media queries. What there are, essentially, are CSS elements that will be accessed in the event that a certain media event is triggered. One of the most common @media events is based on the screen size. This is a good place to work because different size devices have different size screens, and have different styling requirements. For example, if you wanted a device to have a responsive design when the screen width is less than 600px, you would need to use a query that looks something like this:
@media only screen and (max-width : 600px) {
/* This is where the specific styling elements will go */
}
For a device with a landscaped orientation:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* This is where the specific styling elements will go */
}
For a device with a portrait orientation:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* This is where the specific styling elements will go */
}
For a device with a specific pixel ratio:
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* This is where the specific styling elements will go */
}
For a device with a specific resolution:
@media only screen (min-resolution:400pp1){
/* This is where the specific styling elements will go */
}