如何使用 html/css 和 javascript 制作响应式网站 [英] how to make a responsive website using html/css and javascript
问题描述
我想知道如何使 html/css 设计具有响应性，以便(如果这就是响应性意味着)根据屏幕大小排列 div(如果桌面浏览器在运行时手动调整大小).例如 :我将 div1、div2、div3 设置为向左浮动.它们在我的浏览器中显示为 3 列.现在，如果我调整浏览器的大小(缩小到较小的大小)，我希望 div1 位于顶部.它下面的div2和div2下面的div 3.同样，如果我完全调整网页大小，我希望 div 再次显示为 3 列.
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.
在您的示例中，您有 3 个 div 浮动，因此 css 应如下所示:
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%;
}
始终将所有浮动宽度的总和设为 100%.
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%;}
}
当窗口宽度为 600px 或更低时，您告诉浏览器更改 divs 的 css 属性.在这种情况下，您将每个 div 设置为 100% 宽度，以便它们按照您想要的方式堆叠并保持 html 顺序.
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屋！
