Responsive
web design (RWD) is a web design approach aimed at making websites change
itself to provide an optimal viewing experience—easy reading and navigation
with a minimum of resizing, panning, and scrolling—across a wide range of
devices (from mobile phones to desktop computer monitors).
That means
make your website to adjust itself as per viewer's screen resolution or device
such as mobile or desktop. In this way you can increasing user experience of
your website. In this discussion we are going to take look at components that
requires to build responsive website.
1)View port
2)css media
queries
View port
View port is
very important component for your responsive Website. Without it your website
can not show phenomena of responsiveness on mobile devices.
View port
actual reads width of device and ask browser to do responsive things. View port
lies between head tags of your html code.
|
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
|
Css3 Media queries
Css3 media
queries are introduced to targeting different sizes of devices or view port.
Basically this gives you to build css to target specific width's devices. Means
you can write style separately for mobile devices, tablets and desktops. In
this way website fits to that specific device perfectly. But you should design
your website differently for each set of devices.
You can
include media queries in three ways to your webpage.
1)In the head tag of html you can import
different style sheets for different widths of devices, like this
|
<link href="styles.css" rel="stylesheet"
media="all and (max-width: 1024px)">
|
2)Or you can import external style sheet
inside your existing style sheet
|
@import url(styles.css) all and (max-width: 1024px) {...}
|
3)Or you can write rules for different
media queries inside your single style sheet
|
@media all and (max-width: 1024px) {...}
|
Most experts
recommend the 3rd one that means write media queries in side your one single
css style sheet. Because importing external style sheets may increase your page
request, which may cause slowdown your page to load.
Each media
query may include a media type. Common media types include all, screen, print,
tv, and braille. The HTML5 specification includes new media types, even
including 3d-glasses.Screen is default media type if not specified. Way to
write media type is
Style you
want to apply for screen media (like desktop, mobile etc) go inside '{}' and
same for print media.
For responsive
website it is necessary to write different styles for different width of
screen. So media query gives you that option. You can write it like this
|
@media only screen and (min-width : 320px) and (max-width :
480px) {
/* Styles */
}
|
The style written
in this media query will apply for screen with width between 320px to 480px.
We can also
write in this manner given below
|
@media only screen and (min-width : 320px){
/* Styles */
}
|
This will
apply style only for screen with above 320px. Here we are not restricting max
screen width.
|
@media only screen and (max-width : 320px) {
/* Styles */
}
|
This will
apply style for screen with below 320px. That means this will never apply for
screen width above 320px
Now like this
you can write style for specific conditions you need. You can add as many media
queries in style sheet you want.
I hope this
will help many beginners in responsive web designing.
I next
session I am going to discus recommended breakpoints or screen sizes for media
queries.
