Useful css for responsive web design
19
Useful CSS for responsive web design Created by : infobizzs.com
-
Upload
steve-fort -
Category
Documents
-
view
222 -
download
2
description
Response means reactive or quick to respond, and as related to web, means quick to response on any event of mouse.
Transcript of Useful css for responsive web design
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.
