useful css for responsive web design
Post on 31-Mar-2016
228 Views
Preview:
DESCRIPTION
TRANSCRIPT
Meaning of Responsive
• Response means reactive or quick to
respond, and as related to web, means quick
to response on any event of mouse.
• Most of web developer has no clear idea of
responsive web design.
• It is not the site for mobile devices, but the
website for all the devices starting from
desktops, laptops, tablets and mobile
phones.
Meaning of Responsive
• Responsive web developments is come into
existence due to most of the people use
mobile phones and want to access sites from
the same device.
• So web developer has to design site which
have vary viewport sizes.
• This website must fit to any viewport size and
it is possible through scaling.
• Beginner found this topic as difficult, but
actually it is as simple as they have fear.
What the user want from
your site ?
• Sometimes we think that cut down some
features which is not useful according to you,
but it may happen that user come to your
site for that particular feature.
• You can’t decide what the important content
is.
What the user want from
your site ?
• For example, surf the site bootstrap from
desktop and at the same time from mobile
also.
• You can see the full menu on your desktop,
while on smart phone, you can’t find the full
menu, but the content is same.
• To make your site responsive, you have to
decide minimum width, maximum width and
relative value while designing the CSS.
“Viewport” Meta Tag
• As said here, you must make the design
scalable for different type of viewports.
• Here, there is one „viewport‟ meta tag to
decide the width of device.
• This meta tag tells the browser to use the
device width as the viewport width.
• This meta tag must be include in <head> part.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
“Viewport” Meta Tag
• In the above image, the browser takes desktop
width for website and for below image the
browser takes the mobile phone width.
• If you want to design good responsive site, than
you have to keep patient for that because it
requires time and efforts.
• As you know now, the same site is useful for
all the devices and the code is also single for
all the viewports.
• So there is no need to cut down content for
small devices.
Keep Focus
• While designing a responsive website, first
you should design for small device.
• So in this way, you know which information is
the important for your users to give.
• Other than this, you must say to browser
how to render the webpage.
• For example, you can set width for 980px or
less viewport.
For 980px or less
@screen and (max-width: 980px)
{
#pagewrap { width 94% }
#content { width 66% }
#sidebar { width 30% }
}
For 700px or less
@screen and (max-width: 980px)
{
#content {
width: auto;
float : none;
}
#sidebar {
width: auto;
float : none;
}
}
For 480px or less (for
mobile user)
@screen and (max-width: 980px)
{
#header {
height : auto;
}
h1 {font-size : 20px;}
#sidebar {
width: auto;
float : none;
}
}
Conclusion
• I have just seen you few queries, but you
can write as many as you require.
• This different query is useful for different
viewports.
top related