我正在使用 Bootstrap，我正在努力确保网站能够响应不同的屏幕尺寸，即当我调整浏览器窗口大小时，某些元素不会相应地调整大小。同样，当我在 javascript 控制台中选择 iPhone 显示时，它也不适合。
这是我将浏览器窗口宽度减半时看到的内容: screen_view_small width window
以下是我将浏览器窗口宽度减半时希望看到的内容: screen_view_expected after resize
如何解决这个问题，以便在调整窗口大小时正确调整元素的宽度？它确实适用于我的标题，但不适用于其他元素:col-md-10、容器和图表。高度应保持不变，但宽度必须响应。图表在 Highcharts 中完成，highchart 中不传递宽度或高度值。
我的html文件设置如下:
<!doctype html>
<html>
<head>
<title>my title here</title>
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="/static/css/style_charts_black.css">
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/Highcharts-5.0.14/code/highcharts.js"></script>
<script src="/static/Highcharts-5.0.14/code/modules/exporting.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div class="header-container">
<header>
...
</header>
</div>
<div class="container-fluid content-container">
<div class="row">
<div class="col-md-2">
...
</div>
<div class="col-md-10">
...
</div>
</div>
</div>
</body>
</html>
我的自定义 css 文件设置如下:
body {
position: relative;
font-family: 'GothamBook', sans-serif;
font-size:12px;
font-weight:300;
height: 1100px;
padding: 0;
margin: 0;
}
.content-container {
box-sizing: border-box;
clear: both;
float: left;
height: 100%;
padding: 65px 0 0;
width: 100% !important;
min-width: 768px;
overflow: hidden !important;
}
.row {
box-sizing: border-box;
clear: both;
float: left;
height: 100%;
overflow: hidden !important;
position: relative;
width: 99%;
margin-left: 10px;
margin-top: 13px;
}
.col-md-2 {
position: relative;
height: 100%;
min-width: 250px;
max-width: 250px;
bottom: 20px;
}
.col-md-10 {
position: absolute;
margin-left: 255px;
height: 100%;
width:100%;
bottom: 20px;
}
.chart {
position: absolute;
width: 98%;
height: 92%;
margin-top: 35px;
}
.header-container{
float:left;
width:100%;
height:65px;
box-shadow: 0 1px 11px rgba(0, 0, 0, 0.7);
position:absolute;
top:0;
left:0;
z-index:101;
min-width: 768px;
}
.header-container header{
float:left;
width:100%;
}
最佳答案
伙计，你正在使用 Bootstrap ，试试他们的网格类，col-md-2 col-sm-6 col-xs-12。
看看这个https://getbootstrap.com/docs/3.3/css/#grid
Grid system
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
| Extra small devices Phones (<768px)| Small devices Tablets (≥768px) |Medium devices Desktops (≥992px) |Large devices Desktops (≥1200px) __________________________________________________________________________________________________________________________________________________________ Class prefix| .col-xs- | .col-sm- | .col-md- | .col-lg- __________________________________________________________________________________________________________________________________________________________
关于html - 如何设置 html 元素宽度以在浏览器窗口调整大小时调整大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46586661/