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

My issue is that when I drag my webpage over from my Macbook 13 inch to my Samsung 24 inch monitor, the text... in this case 'Expertise' changes its position. The text moves up, where as the navigation bar stays in place, adapting successfully to the change of monitor.

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

I know this is a simple case of design flaw. I mean, I haven't used margins in this webpage. Although I want to be able to have a full screen background that takes up half the top portion of the page, although have the text adapt to the screen size. I'm not talking about making a webpage that works on phones and tablets just yet. Just a webpage that will work on different sized monitors, 13 inch, 25 inch etc... I hope that someone can edit my code so I can see what to do!

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

I want my website to look good on different sized monitors and am not quite sure what I am doing wrong. I used position: fixed; for the nav bar so that when I scroll down it follows the page, although for the text... 'expertise' I am using top, bottom, right, left etc... to position. I have no idea how to align the text where I want and have it work on different sized monitors. Essentially prevent the text from floating left, up etc... I want the text to resize accordingly, although not fall out of place.

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

I will post my code below, but would like to thank all of you for your time! I'm sorry if I'm not clear enough with my question as i am not even quite sure what the proper terminology for this is.

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

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

I'll also link to codepen so you can see what i'm talking about in regards to the 'expertise' text moving all around.

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

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

Thank you!

1 个解决方案

#1

Okay I didn't change a lot, but just some things that I thought were crucial to give you a jump start on making it responsive (applicable for all / most screen sizes). http://codepen.io/anon/pen/azgMjo

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

A couple of tips: in your Css you might want to consider starting out with:

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

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

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

The code above makes the base of your website instantly responsive for all screen sizes. The trick now is to make everything else in it responsive as well. Also try to learn HTML5 and use it where ever you can as it's coding to the latest standards for web-development. E.g.:

上面的代码使您的网站的基础立即响应所有屏幕大小。现在的诀窍是使其中的所有其他内容都响应。同时尝试学习HTML5并尽可能地使用它,因为它编码的是最新的Web开发标准。例如。:

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

... 成为

Another things which is advised is to put your jQuery or Javascript scripts (the one you use to link your jQuery / Javascript) right BEFORE the closing tag of the </body>.

建议的另一件事是在的结束标记之前放置您的jQuery或Javascript脚本(用于链接jQuery / Javascript的脚本)。

And to answer your main question: notice how I gave the parent of the text: position: relative AND the text itself position: absolute;

并回答你的主要问题:注意我如何给出文本的父级:position:relative AND text本身的位置:absolute;

And I placed the text with a top: 30%; This places the text 30% from the top of the parent window on all screen sizes! So no matter what what the height of the screen size is, the text is always placed 30% from the top of it's parent.

我把文字放在顶部:30%;这会将文本从父窗口顶部的30%放置在所有屏幕尺寸上!因此,无论屏幕大小的高度是多少,文本总是从其父级的顶部放置30%。

I could go on, but I think this will help you to get a jump start.

我可以继续,但我认为这将帮助你获得一个快速启动。

If you find my answer useful, you can give me points for my answer. Same applies for comments, if you find the useful, you can hover over the comment and click on the arrow that points up (which also gives me a point).

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

Good luck!

#1