我试图通过媒体查询使我的网站响应。外部DIV改变了宽度,但内部节点的宽度似乎没有变化。
紫色是外面的DIV。
内部文字不会因响应式尺寸变化而改变。
外部DIV变小但内容保持相同的宽度。
以下是代码:
.main{
margin: 0px;
width:1200px;
background-color:blue;
}
.auto-style3{
margin:0px;
background: rgba(204, 204, 204, 0.7);
}
@media only screen and (max-width: 799px){
.main{
width:100%;
}
.auto-style3{
width:100%;
}
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="text.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="main">
<div class="auto-style3" style="height: 100px; width: 1200px" >
<h3 class="onama2"><b>O nama</b></h3>
<h4 class="onama">Tvrtka Agrofit d.o.o. osnovana je 2012.godine s ciljem pružanja stručnog savjetovanja i ostalih usluga u poljoprivrednoj proizvodnji.
Proizvođače pratimo i savjetujemo "od sjetve do žetve" te svim partnerima nudimo <b>uslugu besplatne dostave za naše proizvode na području Republike Hrvatske.</b>
</h4>
</div>
</div>
</body>
</html>
&#13;
答案 0 :(得分:0)
您拥有的选项是:
a)使用font-size
属性更改字体的大小,或
b)在容器上使用overflow
以使内容可滚动
编辑:如果您对文本包装感到满意,还有其他选项,请参阅此问题的其他答案。
答案 1 :(得分:0)
这是因为您在.auto-style3
div上定义了固定宽度。删除内联style="height: 100px; width: 1200px"
答案 2 :(得分:0)
您需要将max-width
应用于.auto-style3
元素,以使其不超过其父元素的宽度。
.auto-style3 {
margin: 0px;
background: rgba(204, 204, 204, 0.7);
}
.main {
margin: 0px;
width: 1200px;
background-color: blue;
}
.auto-style3 {
max-width: 100%;
}
@media only screen and (max-width: 799px) {
.main {
width: 100%;
}
.auto-style3 {
width: 100%;
}
}
&#13;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="text.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="main">
<div class="auto-style3" style="height: auto; width: 1200px">
<h3 class="onama2"><b>O nama</b></h3>
<h4 class="onama">Tvrtka Agrofit d.o.o. osnovana je 2012.godine s ciljem pružanja stručnog savjetovanja i ostalih usluga u poljoprivrednoj proizvodnji. Proizvođače pratimo i savjetujemo "od sjetve do žetve" te svim partnerima nudimo <b>uslugu besplatne dostave za naše proizvode na području Republike Hrvatske.</b></h4>
</div>
</div>
</body>
</html>
&#13;