Question

我正在尝试让我的网页更具响应性。截至目前，我有我的网站的徽标，然后有两个内容行。这个文本在任何不同的计算机屏幕分辨率上都像疯了一样上下移动，我希望它保持固定在屏幕上我希望它的位置。实际上不是position: fixed。如何使这些代码行更具响应性？

#homeTitle {
color: #FFFFFF;
    margin-top: 155px;
    font-size: 6em;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px #800000;
}
#homeTitlePart2 {
    color: #FFFFFF;
    float: right;
    padding-top: 40px;
    /*padding-right: 220px;*/
        padding-right: 20%;
    padding-bottom: 20px;
    font-size: 2.5em;
        font-family: 'Oswald', Helvetica;
        font-weight: 300; // 700 and 300 also available
}
#homeTitlePart3 {
    color: #FFFFFF;
    float: right;
    clear: both;
    padding: 10px, 10px, 10px, 10px;
        padding-right: 10%;
    font-size: 2.5em;
        font-family: 'Oswald', Helvetica;
        font-weight: 400; // 700 and 300 also available
}

我创造了一个小提琴来展示它现在的样子。

https://jsfiddle.net/6x9mz2d3/

Answer 1

你尝试过使用职位吗？我知道你需要做的是，

.ttl-container{
position:relative;
margin-top: 155px;
max-height:600px;
border:1px solid red;
}
#homeTitlePart2, #homeTitlePart3{
position:absolute;
display:block;
font-size: 2.5vw;
right:0;
font-family: 'Oswald', Helvetica;
}
#homeTitle{
font-size: 6vw;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px #800000;
}
#homeTitlePart2 {
padding-top: 40px;
right:20%;
top:100px;
font-weight: 300;
}
#homeTitlePart3 {
padding: 10px;
top:200px;
right: 10%;
font-weight: 400;
}

看看你是否可以这样做。请注意，所有浏览器都不支持 font-size：（n）VW 。如果您不想使用它，请为所有对您重要的视口添加媒体屏幕。

Answer 2

使用最大高度，最大宽度使页面更具响应性。获取更多信息click here

使内容在高度方面更具响应性

2 个答案: