Html 当窗口调整大小时，文本被隐藏_Html_Css_Window

Html 当窗口调整大小时，文本被隐藏

html css

Html 当窗口调整大小时，文本被隐藏,html,css,window,Html,Css,Window,我正在根据提供的模板为班级建立一个网站，我正在努力使我的文本在调整窗口大小时移动（现在，调整窗口大小会模糊文本和相关按钮）理想情况下，我希望页面锚定在这样一种方式上，即在调整窗口大小时，焦点仍然停留在文本/按钮上，并延伸到图像的右下角这是我的HTML： <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-wid

我正在根据提供的模板为班级建立一个网站，我正在努力使我的文本在调整窗口大小时移动（现在，调整窗口大小会模糊文本和相关按钮）

理想情况下，我希望页面锚定在这样一种方式上，即在调整窗口大小时，焦点仍然停留在文本/按钮上，并延伸到图像的右下角

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

看起来您尚未定义行的宽度。尝试以下方法：

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

当我使用web应用程序时，我喜欢使用引导。它为我提供了一系列现成的css类，帮助我创建一个响应性强的前端，在任何屏幕大小上都能满足我的需要。长话短说，我会使用媒体查询、引导布局网格或两者的组合

youtube上有很多教程。这家伙展示了引导布局网格的基本工作原理

当您需要UI根据当前设备屏幕大小执行不同操作时，媒体查询非常有用。这可以在不需要引导的情况下使用，但也可以与引导一起使用，以制作真正响应的应用程序。youtube上也有无数关于这方面的教程，但这里有一个不错的

媒体查询示例：

@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
}

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

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

.hero文本框{
位置：绝对位置；
最高：80%；
左：49%；
文本对齐：右对齐；
转换：翻译（-50%，-50%）；
最大宽度：1080px；
宽度：100%；
}

@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
}