RWD stands for Responsive WEB Designing & it allows,
1) To
create a website from a single-data source.
2) Adjust
its layout accordingly to provide an optimal viewing experience – easy reading
and navigation with a minimum of re-sizing, panning, and scrolling – across a
wide range of devices (from desktop computer monitors to tablets to mobile
phones).
3) It provides
an elegant solution for a complex problem – how to develop a single website
that satisfies today’s multi-platform consumer.
4) It is not a new technology; rather, it is
a new way of thinking about the web.
RWD uses something with the obscure concept of fluid-based proportion grids.
Instead of designing a layout based on rigid pixels or arbitrary percentage
values, a fluid grid is more carefully designed in terms of proportions. This
way, when a layout is squeezed onto a tiny mobile device or stretched across a
huge screen, all of the elements in the layout will resize their widths in relation
to one another.
Flexible grids have been around since the beginning of the
web, and were very popular at the beginning. While media queries are the real
secret to making any site responsive, we can save our self a lot of work and
code by using a flexible grid approach. By using a flexible grid you can ensure
your site will re-size on its own without having to have media queries. You can
then use media queries to fix all of the little details that will make the site
shine.
In addition RWD uses flexible
images; one rule immediately provides an incredibly handy constraint for
every image in our document. Now, our
img element will render at
whatever size it wants, as long as it’s narrower than its containing element.
But if it happens to be wider than its container, then the max-width: 100% directive forces the
image’s width to match the width of its container. And as you can see, our
image has snapped into place.
What’s more, modern browsers have evolved to the point where
they resize the images proportionally: as our flexible container resizes
itself, shrinking or enlarging our image, the image’s aspect ratio remains
intact.img, embed,
object, video {
max-width: 100%;
}
Whether
it’s a cute little Flash video, some other embedded media, or a humble img, browsers do a fair job of resizing the content proportionally
in a flexible layout.
And media queries,
expressions to media type to check for certain conditions and apply different
stylesheets. For example, we can have one stylesheet for large displays and a
different stylesheet specifically for mobile devices. It is quite powerful
because it allows you to tailor to different resolutions and devices without
changing the content.
To do so, we could incorporate a query into a linked style
sheet’s media attribute:
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)” href="shetland.css"
/>
The query contains two components:
a media type (screen), and the actual query enclosed within
parentheses, containing a particular media feature (max-device-width) to
inspect, followed by the target value (480px).
Furthermore,
we’re not limited to incorporating media queries in our links. We can include them in our CSS either as
part of a @media rule:
@media screen and
(max-device-width: 480px) {
.column {
float: none;
}
}
No comments:
Post a Comment