Question

我正在基于提供的模板构建一个类的网站，我正在努力使它能够在窗口调整大小时移动我的文本（现在，调整窗口大小会遮挡文本和相关按钮）。

理想情况下，我希望页面以这样一种方式锚定，使得焦点保留在文本/按钮上 - 并且通过扩展，图像的右下角 - 随着窗口的大小调整。

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta name="viewport" content="width=device-width, inital-scale=1.0">  
<!-- This tells mobile devices not to zoom out the page, start with scale=1 -->
        <link rel="stylesheet", type="text/css", href="Vendors/css/normalize.css">
        <link rel="stylesheet", type="text/css", href="Vendors/css/grid.css">
        <link rel="stylesheet", type="text/css", href="Vendors/css/ionicons.min.css">
        <link rel="stylesheet", type="text/css", href="Resources/css/style.css">
        <link rel="stylesheet", type="text/css", href="Resources/css/queries.css">
        <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>

        <title>Whitetail Acres Tree Farm</title>
    </head>
    <body>
        <header>
            <nav>
                <div class="row">
                    <img src="Resources/img/logo-white.png" alt="Omnifood logo" class="logo">
                    <ul class="main-nav">
                        <li><a href="#features">Food Delivery</a></li>
                        <li><a href="#meals">How it Works</a></li>
                        <li><a href="#steps">Our Cities</a></li>
                        <li><a href="#cities">Sign up</a></li>
                    </ul>
                    <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
                </div>
            </nav>
            <div class="hero-text-box">
                <h1>Schedule <br> Your Visit!</h1>    
                <a class="btn btn-full js--scroll-to-plans" href="#">I'm hungry</a>
                <a class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a>
            </div>
        </header>

这是我的CSS：

/* Universal Reset*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html
{
    background-color: #ffffff;
    color: #555;
    font-family: 'Lato', 'Arial', sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}

.clearfix {zoom: 1}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

header{
    background-image: url(img/hero.jpg);
    background-size: cover;
    background-position:bottom, right;
    height: 100vh;
    background-attachment:inherit;
}

.hero-text-box{
    position: absolute;
    width:1080px;
    top:80%;
    left:55%;
    text-align: right;
    transform: translate(-50%, -50%);
}

.row{
    max-width: 1140px;
    margin:0 auto;
}

section{
    padding: 80px 0;
}

.box{

    padding: 1%;

Answer 1

看起来你没有为行定义宽度。尝试类似：

.row{
max-width: 1140px;
width: 100%;
margin:0 auto;
}

Answer 2

当我做网络应用程序时，我喜欢使用bootstrap。它为我提供了一堆开箱即用的CSS课程，帮助我创建一个响应式前端，可以在任何屏幕尺寸上完成我需要的操作。简而言之，我会使用媒体查询，引导布局网格或两者的组合。

youtube上有很多教程。这个人展示了基础知识如何用于引导布局网格。 https://youtu.be/GDwWmrpCa30

当您需要UI根据当前设备屏幕大小执行不同操作时，媒体查询非常有用。这可以在不需要引导程序的情况下使用，但也可以与引导程序一起使用以制作真正响应的应用程序。 youtube上也有无数的教程，但这里有一个很好的教程。 https://youtu.be/2KL-z9A56SQ

媒体查询示例：

string DoubleMe(Object o)
{
    switch (o)
    {
        case String s:
            return s + s;
        case Int32 i:
            return (i + i).ToString();
        default:
            return "type which cannot double.";
    }
}

void Main()
{
    var s= "Abc";
    var i= 123;
    var now = DateTime.Now;

    DoubleMe(s).Dump();
    DoubleMe(i).Dump();
    DoubleMe(now).Dump();
}

如果我能得到进一步的帮助，请告诉我。祝你好运。

Answer 3

当为绝对定位的元素设置精确的宽度时，无论浏览器大小如何，您都应该期望它将保持该宽度。

.hero-text-box{
    position: absolute;
    top:80%;
    left: 49%;
    text-align: right;
    transform: translate(-50%, -50%);
    max-width: 1080px;
    width: 100%;
}

此外，由于转换规则将其移出屏幕，因此左侧值应小于50％。

窗口调整大小时隐藏文本

3 个答案: