Html 防止凸起的div根据屏幕宽度移动

我想防止div在宽度较小的移动设备上向上移动。我意识到我可以通过媒体查询做到这一点，但我觉得可能有一种更干净的方法

.wrapper{
背景：无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
垫面：23%；
溢出：隐藏；
文本对齐：居中；
}
#标题背景{
背景：rgba（0,0,0,5）；
}
#头衔{
字体系列：Consoleas、摩纳哥、monospace；
文本对齐：居中；
字号：5em；
字号：900；
颜色：#fff；
显示：内联块；
}
#标题定位{
位置：相对位置；
顶部：-50px；
}

我的头衔

你的

.wrapper

有一个百分比padding

padding top:23%

，所以在移动设备上，这将比桌面上少得多，你可以放置一个固定的

px

padding，所以它在所有设备上都是相同的

.wrapper{
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 100px;
    overflow:hidden;
    text-align: center;
}

你可以用css代替百分比，然后给它你想要的值

vh

是根据设备高度测量的

.wrapper{
背景：无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
垫顶：65vh；
溢出：隐藏；
文本对齐：居中；
}
#标题背景{
背景：rgba（0,0,0,5）；
}
#头衔{
字体系列：Consoleas、摩纳哥、monospace；
文本对齐：居中；
字号：5em；
字号：900；
颜色：#fff；
显示：内联块；
}
#标题定位{
位置：相对位置；
顶部：-50px；
}

我的头衔

使用绝对定位。这正是您想要的：

.wrapper{
背景：无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
溢出：隐藏；
文本对齐：居中；
}
#标题背景{
背景：rgba（0,0,0,5）；
}
#头衔{
字体系列：Consoleas、摩纳哥、monospace；
文本对齐：居中；
字号：5em；
字号：900；
颜色：#fff；
显示：内联块；
}
#标题定位{
位置：绝对位置；
底部：65%；
宽度：100%；
}

我的头衔

您想将我的标题集中在小型设备和桌面上吗？我想将标题从较小分区的底部提高到65%左右，但无论设备如何，都要保持在该位置。那么，为什么不使用“绝对”位置？如果你在包装纸的顶部填充一个固定的单位，你的问题就会消失，但是你失去了你想要的比例……显示的div更复杂。它由jQuery插件填充，而absolute似乎不起作用。