[英]HTML, CSS : Responsive header with logo and text
我在尝试重新创建这个Wix网站时遇到了很多麻烦,其目标是让移动和桌面网站能够响应其他内容。
http://nl.wix.com/website-template/view/html/936?&viewMode=mobile
一旦我使用不同的宽度,30°移动到不同的位置,这意味着该站点没有正确响应。 我不知道如何解决这个问题。 这是我的代码:
HTML:
<body>
<div class="header">
<h1>30 °C</h1>
<div class="clearfix"><img src="./img/banner.png" alt="banner"> </div>
<p>Beginning application developer</p>
</div>
</body>
CSS:
.header {
background-color: #7A7CB1;
width:100%;
position:absolute;
top:0;
left:0;
}
.header img {
width: 62.5%;
margin-top: 2.5%;
margin-left: 6.75%;
float:left;
}
.header h1 {
position: absolute;
top: 30%;
left: 30%;
font-size: 200%;
}
.clearfix {
overflow: auto;
}
.header p {
margin-left: 6.75%;
font-family: Verdana, geneva, sans-serif;
font-size: 13px;
}
我希望30°低于徽标,就像它在照片中一样,但如果手机的宽度更小或更大,徽标和文字应该变得更小或更大(响应)。
如果希望文本在不同的设备宽度上变大或变小,则需要添加媒体屏幕
以下是媒体屏幕的示例
@media only screen and (max-width:940px){ /* Tablets*/
h1{
font-size:12px;
}
}
当设备的最大宽度为940px(平均平板电脑尺寸)时,它的作用是什么。 h1的字体大小设置为不同的大小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.