如何使用html / css和javascript做出响应的网站 [英] how to make a responsive website using html/css and javascript
问题描述
我想知道如何使html / css设计可以响应，以便（如果这是响应的意思）div根据屏幕大小排列（如果桌面浏览器在运行时手动调整大小）。
例如：
我有div1，div2，div3设置为float left。它们在我的浏览器中显示为3列。现在如果我调整（到更小的大小）我的浏览器我想div1在上面。 div2下面和div 3下面div2。
类似地，如果我调整我的网页完全我希望divs再次显示为3列。
除了正常的defalut行为，有没有任何方式可以单独指定更改。
<！DOCTYPE html>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title>< / title>
< / head>
< body>
< div id =div1style =width：500px; height：200px; background-color：red; float：left;>< / div&
< div id =div2style =width：500px; height：200px; background-color：yellow; float：left;>< / div&
< div id =div3style =width：400px; height：200px; background-color：green; float：left;>< / div&
< / body>
< / html>
请任何帮助将非常感谢。我对响应式设计布局完全陌生。
响应式布局的基础是使用像素百分比，在您的示例中，您有3个div浮动，因此css应该如下所示：
＃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％;
}
始终将所有浮动宽度的总和设为100％。
然后添加一个断点（或根据需要），如下所示：
@media（max-width：600px）{
＃div1，＃div2，＃div3 {width：100％;}
}
您可以告诉浏览器更改您的 divs 属性的 css $ c>当窗口宽度为600px或更低。在这种情况下，你使每个div 100％的宽度，所以他们将堆栈，因为你想保持html顺序。
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.
这篇关于如何使用html / css和javascript做出响应的网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
