Making a webpage responsive
Simply put this inside the <head> tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What is viewport?
The user's visible area of a web page.
Grid-view is usually used with 12 (or 16, 18 ...) grids.
To make the 12 grids, simply add classes holding 1/12 of the whole layout of the webpage:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
and:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Image tag (exactly the same applies to video tag)
images will be responsive when width=100%; height=auto;
or, do maxwidth=100% to prevent image from getting too large.
background-size
using different images (or images of different sizes) for different types of device
/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
for testing on both mobile device and desktop: using blisk may be handy.
Other methods:
1. Use media queries:
<link rel="stylesheet" media="(min-width: 600px)" href="min-640px.css">
OR
@media (min-width: 600px) {
}
from https://developers.google.com/web/fundamentals/design-and-ui/responsive/#css-media-queries:
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
@media (min-width: 500px) and (max-width: 600px) {
h1 {
color: fuchsia;
}
.desc:after {
content:" In fact, it's between 500px and 600px wide.";
}
}
</style>
2. set max-width:
.container { margin: auto; max-width: 800px; }
3.manage paddings:
#headline { padding: 20px 5%; }
4. float the things:
so that the elements may automatically moved down when there is a narrow viewport to fit two elements.
5. use relative units!!"A key concept behind responsive design is fluidity and proportionality as opposed to fixed width layouts. Using relative units for measurements can help simplify layouts and prevent accidental creation of components that are too big for the viewport." SO use % instead of px to your div.
Simply put this inside the <head> tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
- The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
- The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
What is viewport?
The user's visible area of a web page.
Grid-view is usually used with 12 (or 16, 18 ...) grids.
- Some useful grid stylesheets: http://www.creativebloq.com/features/5-top-grid-systems-for-web-designers
- So, basically, the whole website layout is divided vertically into 12 columns.
- it makes it easier to place elements on the webpage.
- Just looking at what W3SCHOOLS did will give a lot of more sense. Find the image in gallery.
To make the 12 grids, simply add classes holding 1/12 of the whole layout of the webpage:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
and:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Image tag (exactly the same applies to video tag)
images will be responsive when width=100%; height=auto;
or, do maxwidth=100% to prevent image from getting too large.
background-size
- backrgound-size: contain will fit the image into the container that it is in.
- background-size: 100% 100% will 'stretch' to the whole screen (literally with 100% and 100%)
- background-size: cover will 'scale' to the whole screen. Some part of the image may be clipped.
using different images (or images of different sizes) for different types of device
/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
for testing on both mobile device and desktop: using blisk may be handy.
Other methods:
1. Use media queries:
<link rel="stylesheet" media="(min-width: 600px)" href="min-640px.css">
OR
@media (min-width: 600px) {
}
from https://developers.google.com/web/fundamentals/design-and-ui/responsive/#css-media-queries:
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
@media (min-width: 500px) and (max-width: 600px) {
h1 {
color: fuchsia;
}
.desc:after {
content:" In fact, it's between 500px and 600px wide.";
}
}
</style>
- When the browser is between 0px and 640px wide, max-640px.css is applied.
- When the browser is between 500px and 600px wide, styles within the @media is applied.
- When the browser is 640px or wider, min-640px.css is applied.
- When the browser width is greater than the height, landscape.css is applied.
- When the browser height is greater than the width, portrait.css is applied.
2. set max-width:
.container { margin: auto; max-width: 800px; }
3.manage paddings:
#headline { padding: 20px 5%; }
4. float the things:
so that the elements may automatically moved down when there is a narrow viewport to fit two elements.
5. use relative units!!"A key concept behind responsive design is fluidity and proportionality as opposed to fixed width layouts. Using relative units for measurements can help simplify layouts and prevent accidental creation of components that are too big for the viewport." SO use % instead of px to your div.