Question

我的问题是，当我将我的网页从我的Macbook 13英寸拖到我的三星24英寸显示器上时，文本......在这种情况下“专业知识”改变了它的位置。文本向上移动，导航栏保持原位，成功适应监视器的更改。

我知道这是一个设计缺陷的简单案例。我的意思是，我没有在这个网页上使用边距。虽然我希望能够拥有占据页面顶部一半的全屏幕背景，但是文本可以适应屏幕大小。我不是在谈论制作适用于手机和平板电脑的网页。只是一个可以在不同大小的显示器上工作的网页，13英寸，25英寸等...我希望有人可以编辑我的代码，这样我就可以看到该做什么了！

我希望我的网站在不同尺寸的显示器上看起来很好，我不太确定我做错了什么。我使用的位置：固定;对于导航栏，以便当我向下滚动它跟随页面，虽然对于文本...'专业知识'我使用顶部，底部，右侧，左侧等...来定位。我不知道如何将文本对齐到我想要的位置，并让它在不同大小的显示器上工作。基本上防止文本向左，向上等浮动...我希望文本相应地调整大小，虽然不会失去位置。

我将在下面发布我的代码，但是要感谢你们所有人的时间！如果我对我的问题不够清楚，我很抱歉，因为我甚至不确定这个术语的正确用法是什么。

HTML

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Aesthetic Media</title>
    <link href="styles.css" rel="stylesheet" type="text/css"/>
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,700,500' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="styles.js"></script>
</head>

<body>

<div class="container">

<div class="header">

<div class="nav">

    <div class="logo">
    <ul>
        <li><a href="#">AESTHETIC</a></li>
    </ul>
</div> <!--logo-->

   <div class="main-nav">
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
   </div> <!--main-nav-->

</div> <!--nav-->

</div> <!--header-->

<div class="main-wrapper"> <img src="#" class="scale-image"/>

</div> <!--MAIN IMAGE-->

<div class="main-text">
    <h1>We are Aesthetic</h1>
    <h2>A Visual Agency From Niagara</h2>
</div>

<div class="content">

    <div class="text-2">

        <h2>Expertise</h2>

    </div>

</div>

<div class="footer"></div>

</div> <!--container-->
</body>
</html>

CSS

* {
  margin: 0 auto;
  padding: 0;
}

body {
}

.container {

}

.header {
}

.nav .logo {
 position: fixed;
 top: 22px;
 left: 25px;
 z-index: 1;
}

.nav .logo ul {
  overflow: visible;
  list-style-type: none;
}

.nav .logo ul li {
  display: inline-block;
}

.nav .logo  li a {
  font-size: 1.8em;
  font-weight: 800;
  text-decoration: none;
  color: #000000;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 5px;
}

.nav .main-nav {
  position: fixed;
  top: 25px;
  right: 10px;
  letter-spacing: .2em;
  z-index: 1;
}

.nav .main-nav ul {
  overflow: visible;
  list-style-type: none;
}

.nav .main-nav li {
  height: 13px;
  padding: 0 17px;
  display: inline-block;
}

.nav .main-nav li:last-child {
  border-right: none;
}

.nav .main-nav li a {
  font-weight: 400;
  text-decoration: none;
  color: #000000;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

.nav .main-nav li a:hover {
  background-color: rgba(50, 50, 50, 0.4);
  padding: 3px 10px 3px 13px;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -webkit-font-smoothing: antialiased;
}

.main-text {
  margin: auto;
  height: auto;
  position: absolute;
  top: 230px;
  left: 0;
  bottom: 0;
  right: 0;
}

.main-text h1 {
  font-weight: 600;
  font-size: 1.8em;
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  color: #FFF;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  padding-bottom: 15px;
}

.main-text h2 {
  font-weight: 400;
  font-size: 1.7em;
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  color: #FFF;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  padding-bottom: 15px;
}

.main-wrapper {
  position: absolute;
}

.scale-image {
  width: 100%;
}

.content {
  width: auto;
  height: auto;
}

.content .text-2 {

  color: #CCC;
  margin: auto;
  position: relative;
  top: 600px;
  left: 0;
  bottom: 0;
  right: 0;
}

.content .text-2 h2 {
  font-weight: 400;
  font-size: 1.7em;
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  color: #000000;
  font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
  padding-bottom: 15px;
  -webkit-font-smoothing: antialiased;
}

我还会链接到codepen，这样你就可以看到我所谈论的关于“专业知识”文本的问题。

http://codepen.io/anon/pen/zxVbwb

谢谢！

Answer 1

好吧，我没有做太多改变，但是我认为对我们来说至关重要的一些事情是让你快速响应（适用于所有/大多数屏幕尺寸）。 http://codepen.io/anon/pen/azgMjo

一些提示：在您的Css中，您可能需要考虑从以下开始：

html{
 height: 100%;
 width: 100%;
}

body{
 width: 100%;
 height: 100%;
}

上面的代码使您网站的基础能够立即响应所有屏幕尺寸。现在的诀窍是使其中的所有其他内容也响应。同时尝试学习 HTML5 ，并尽可能地使用它，因为它编写了最新的Web开发标准。 E.g：

<div class="nav">...</div> Becomes <nav>...</nav> <div class="footer">...<div> Becomes <footer>...</footer>等

建议的另一件事是将{jQuery或Javascript脚本（用于链接jQuery / Javascript的脚本）放在</body>的结束标记之前。

回答你的主要问题：请注意我如何给出文本的父母：position: relative AND the text itself position: absolute;

我用top: 30%;放置了文字这会将文本从父窗口顶部的30％放置在所有屏幕尺寸上！因此，无论屏幕尺寸的高度是多少，文本总是从它的父母顶部放置30％。

我可以继续，但我认为这将有助于您获得一个快速启动。

如果你觉得我的答案很有用，你可以给我一些答案。同样适用于评论，如果您发现有用，您可以将鼠标悬停在评论上并单击指向的箭头（这也给了我一个观点）。

祝你好运！

无论显示器尺寸如何，如何使文本保持原位？

1 个答案: