This question already has an answer here:
I wanted to know how a html /css design can be made responsive so that (if that's what responsive means) the div are arranged according to the screen size(in case of desktop browser being resized manually at runtime). for example : i have div1, div2, div3 set as float left. they appear as 3 columns in my browser. Now if i resize(to a smaller size) my browser i want the div1 to come on top. div2 below it and div 3 below div2. similarly, if i resize my web page fully i want the divs to again appear as 3 columns.
apart from the normal defalut behavior , is there any way through which changes can be specified separately?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="div1" style="width:500px;height:200px;background-color:red;float:left;"></div>
<div id="div2" style="width:500px;height:200px;background-color:yellow;float:left;"></div>
<div id="div3" style="width:400px;height:200px;background-color:green;float:left;"></div>
</body>
</html>
please any help would be greatly appreciated. I am completely new to responsive design layout.
The basics of a responsive layout are the use of percentage insteed of pixels and adding breakpoints with media queries.
In your example, you have 3 divs floating so the css should look like this:
#div1, #div2, #div3 {
float:left;
height:200px;
}
#div1 {
background-color:red;
width:40%;
}
#div2 {
background-color:yellow;
width:40%;
}
#div3 {
background-color:green;
width:20%;
}
Always making the sum of all your floating widths 100%.
Then add a breaking point (or as many as you need) like this:
@media (max-width: 600px) {
#div1, #div2, #div3 {width:100%;}
}
where you tell your browser to change the css properties of your divs when window width is 600px or lower. In this case you make each div 100% width so they will stack as you want keeping the html order.
This is mainly achieved with CSS3 Media queries. You can use a CSS frameworks and follow the grid system to reduce your workload.
Frontend Frameworks
Duplicate of following stack overflow questions
You have to use percentage instead of fixed pixel-values. This is called "making the design fluid".
Have a look at this: https://teamtreehouse.com/community/pixel-to-percentage-conversion
There will be points (when the width becomes to small) at which you're layout doesn't work anymore. Then you use media-queries to re-structure your layout.
来源：https://stackoverflow.com/questions/33866454/how-to-make-a-responsive-website-using-html-css-and-javascript