窗口调整大小时隐藏文本答案

【问题标题】：Text is Hidden When Window Resizes窗口调整大小时隐藏文本
【发布时间】：2018-04-26 14:59:40
【问题描述】：

我正在基于提供的模板构建一个课堂网站，我正在努力使我的文本随着窗口大小的调整而移动（现在，调整窗口大小会掩盖文本和相关按钮)。

理想情况下，我希望页面以这样一种方式锚定，即焦点保持在文本/按钮上 - 以及图像的右下角 - 随着窗口大小的调整。

这是我的 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%;

【问题讨论】：

标签： html css window

【解决方案1】：

看起来您还没有定义行的宽度。尝试类似：

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

【讨论】：

【解决方案2】：

当我做 Web 应用程序时，我喜欢使用引导程序。它给了我一堆开箱即用的 css 类，帮助我创建一个响应式前端，可以在任何屏幕尺寸上做我需要的事情。长话短说，我会使用媒体查询、引导布局网格或两者的组合。

youtube 上有很多教程。这个人展示了引导布局网格的基本原理。 https://youtu.be/GDwWmrpCa30

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

媒体查询示例：

@media only screen 
and (*Your threshold criteria goes here* EXAMPLE:  max-width : 1000px) {   
  //css goes here with whatever css you want to fire at this threshold
}

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

【讨论】：

【解决方案3】：

在为绝对定位的元素设置精确宽度时，您应该期望它会保持在该宽度，而不管浏览器大小。

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

另外，左边的值应该小于 50%，因为转换规则会将其移出屏幕。

【讨论】：