Question

我正在设计一个响应式网站设计，并希望在可缩放图片大小旁边使用设置文本大小。即如果用户放大页面，图像将放大，但旁边的文本将始终保持相同的大小。我遇到的问题是我告诉'.inforight'是68％，但是当页面变小时，68％会超过文本。我确信这有一个解决方案，但我对响应式网站设计不熟悉，并且很难理解如何做到这一点。

<div class="infoleft">    
<h2>Test Header</h2>
<p>Test Writing.</p>
</div>

<div class="inforight">   
<a class="anchor" id="website"></a><img style="width: 100%; height: auto"; src="images/jcb/website.jpg"> 
</div>

CSS：

.infoleft {
width: 986px;
padding-left: 0px;
float: left;
color: #777777;
padding-top: 0px;
display: block;
position:fixed;
top:180px;
}


.infoleft p {
font-size: 9pt;
padding-bottom: 8px;
padding-left: 20px;
width: 230px;
}

.infoleft h2 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #DBD9D4;
padding-bottom: 15px;
margin-bottom: 15px;
width: 230px;
font-size: 11pt;
letter-spacing: 0.5px;
color: #ea5310;
font-family: 'Roboto', sans-serif;
font-weight: 400;
margin-left: 20px;
}

.inforight {
width: 68%;
padding-right: 55px;
float: right;
padding-top: 45px;
}  


.inforight img {
max-width: 100%;
height: auto;
padding-bottom: 20px;
}

提前致谢！

Answer 1

设置自适应代码对您自己来说有点困难。错误可能像这里的情况一样蔓延。

我建议你研究像bootstrap这样的响应式框架。它有一个非常好的文档：http://getbootstrap.com/

Answer 2

您始终可以使用媒体查询来设置设计，如

@media only screen and (max-width: 767px) {

.inforight {
width: 96%;
}
}

改变页面的方向，并按照它们看起来很好的方式放置东西，但你必须将设计设置为符合

Answer 3

更新：我设法通过向右边距和左边距添加set px padding来解决它。这意味着它将保持在一个已找到的区域内，但仍然在其中扩展，这就是我所需要的。感谢大家的帮助！

响应式网站设计 - 设置文字＆amp;可扩展图像

3 个答案: