HTML，CSS：响应标题和文字

我真的有很多麻烦试图重新创建这个Wix网站，目标是使移动&桌面网站与其他内容响应。HTML，CSS：响应标题和文字

http://nl.wix.com/website-template/view/html/936?&viewMode=mobile

当我使用不同宽度的30°移动到不同的位置，这意味着该网站是没有正确响应。我不知道如何解决这个问题。这里是我的代码：

HTML：

<body> 
    <div class="header"> 
     <h1>30 &deg;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°至低于标志像它的照片，但标志和文字如果手机的宽度更小或更大，应该变得更小或更大（响应）。

来源

2017-05-08 Lewis Algawari

问题是什么？ – DeclanPossnett

你想让最终产品看起来像什么？始终在温度计右侧30度？下面的文字？ – StefanBob

我希望网站能够做出反应。因此，如果手机的宽度较小，标志为30度应该更小。问题是30度的位置应该停留在照片上的位置，但它不在宽度不同的位置 –

如果你想要的文字变大/在不同的设备宽度小，你需要的时候，最大添加Media Screens

这里是媒体屏幕的例子

@media only screen and (max-width:940px){ /* Tablets*/ 
    h1{ 
     font-size:12px; 
} 
    }

这样做是什么设备的宽度为940像素（平板电脑的平均尺寸）。 h1的字体大小设置为不同的大小。

来源

2017-05-08 17:35:16

HTML，CSS：响应标题和文字

回答

相关问题