Question

我正在为我的网站创建一个基本联系页面。我正在努力让它在不同的分辨率下看起来很好。

我的笔记本电脑是1368x766，我的显示器是1920x1080。

设置为绝对的元素在四处移动，顶部图像没有移动......所有其他元素都在移动......我很困惑：

CSS：

 body {
  text-align: center;
  background: url("http://i.imgur.com/JN0YSkP.png");
  background-repeat: repeat;
  background-position: center;
  color: white;
  font-family: 'Roboto', sans-serif;
  padding-top: 20px;
  padding-bottom: 0px;
}

p {
position: absolute;
top: 225px; 
right: 410px; 
font-size: 32px;
}
p2 {
position: absolute;
top: 420px;
right: 974px;
font-size: 28px;
}

p3 {
position: absolute;
top: 420px;
right: 570px;
font-size: 28px;
}

p4 {
position: absolute;
top: 420px;
right: 142px;
font-size: 28px;
}

.LI
{
display: inline-block;
position: absolute;
z-index : 2;
top: 510px; 
right:1050px; 
}

.CV
{
display: inline-block;
position: absolute;
z-index : 2;
top: 490px; 
right: 620px; 
}

.mail
{
display: inline-block;
position: absolute;
z-index : 2;
top: 510px; 
right: 196px; 
}

.Divider
{ 
position: absolute; 
z-index: 1; 
top: 380px; 
right: 28px; 
padding-bottom: 20px
}

html { -webkit-font-smoothing: antialiased; }

HTML：

<!DOCTYPE html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
    <title>Benjamin Edwards | Web Designer | West Sussex</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="Benjamin Edwards is a Web Designer and IT Project Manager from West Sussex. Say hello!">
    <meta name="keywords" content="benjamin, edwards, IT, project, manager, photoshop, web, designer, worthing, west sussex">
    <meta name="robots" content="INDEX,FOLLOW">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

    <img src="http://i.imgur.com/6gBN3LF.png">
    <p>Hi! I’m Benjamin, a Worthing based</br>Web Designer and IT Project Manager.</p>
    <p2>Connect on LinkedIN:</p2>
    <div class="LI">
        <a href="https://www.linkedin.com/in/benjaminedwards86">
        <img src="http://i.imgur.com/KEqGBV3.png">
        </a>
    </div>

    <p3>Download my CV:</p3>
    <div class="CV">
        <a href="https://www.dropbox.com/s/9jtsjxpb9xqdpdw/Benjamin%20Edwards%20-%20CV.docx?dl=1" download="benjamin-edwards-CV.doc">
        <img src="http://i.imgur.com/ce0Zzgi.png">
        </a>
    </div>

    <p4>Send me an email:</p4>
    <div class="mail">
        <a href="mailto:benjamin.edwards86@gmail.com">
        <img src="http://i.imgur.com/KQV7Eip.png">
        </a>
    </div>

    <div class="Divider">
        <img src="http://i.imgur.com/B4TiKRT.png">
    </div>

</body>

JSFiddle

Answer 1

作为例子，它对你来说是多么简单，我创造了一个jsfiddle： JSFiddle

<强> HTML

<img src="http://i.imgur.com/6gBN3LF.png">
<p>Hi! I’m Benjamin, a Worthing based</br>Web Designer and IT Project Manager.</p>
  <ul>
   <li><h1>Connect on LinkedIN:</h1>
    <a href="https://www.linkedin.com/in/benjaminedwards86">
     <img src="http://i.imgur.com/KEqGBV3.png">
    </a>
   </li>
   <li><h1>Download my CV:</h1>
    <a href="https://www.dropbox.com/s/9jtsjxpb9xqdpdw/Benjamin%20Edwards%20-%20CV.docx?dl=1" download="benjamin-edwards-CV.doc">
     <img src="http://i.imgur.com/ce0Zzgi.png">
     </a>
    </li>
    <li><h1>Send me an email:</h1>
     <a href="mailto:benjamin.edwards86@gmail.com">
      <img src="http://i.imgur.com/KQV7Eip.png">
     </a>
    </li>
   </ul>

<强> CSS

body {
  text-align: center;
  background: url("http://i.imgur.com/JN0YSkP.png");
  background-repeat: repeat;
  background-position: center;
  color: white;
  font-family: 'Roboto', sans-serif;
    min-width: 900px;
}
img {
    margin: auto 20px;
}

ul {
   height: 275px;
    width: 80%;
    margin: 10% auto;
    border: 3px solid #31C2A9;
    min-width: 900px;
}
ul li {
    float: left;
    width: 33%;
    border-right: 1px solid #31C2A9;
    list-style-type: none;
    height: 275px;
    min-width: 275px;
}
ul li:last-child {
    border-right: none;
}

你摆脱了所有的css选择器并简化你的代码:-) 并且绝对没有单一的位置; - ）

Answer 2

对于你所遇到的问题，总是明智的做法。关于元素移动的问题，因为你已经绝对放置了所有元素并对值进行了硬编码。像：

p {
position: absolute;
top: 225px; 
right: 410px; 
font-size: 32px;
}

由于在不同的浏览器尺寸下，分辨率会发生变化，因此div的位置也会发生变化，因此您的元素移动得很差（因为您绝对将它们定位到一个浏览器维度。

那么你应该做什么：首先，你应该确保你理解div何时应该是绝对的，什么时候应该是相对的。

我会给出一个拇指规则：如果你想相对于一个div定位一个元素。使其位置绝对及其父级，位置：相对。

您可以使用Bootstrap使您的网站响应。但你也可以用％来衡量并防止扭曲。

如果我要做一个：

p3 {
position: absolute;
top: 20%;
right: 30%;
font-size: 1.1em;
}

如果你不确切知道发生了什么，你应该花时间研究％，em测量等。

如果您可以创建一个小提琴并显示您的代码，我们可以帮助您解决它。

Answer 3

您可以使用CSS media queries。

媒体查询是一个CSS3模块，允许内容呈现适应屏幕分辨率等条件（例如智能手机屏幕与计算机屏幕）。

通过媒体查询，我们会将此提升到一个新的水平。我们将研究设备具备的功能，而不是查看它是什么设备。更具体地说，我们将看看以下内容：

设备高度和浏览器宽度的高度和宽度
设备的屏幕分辨率方向（适用于手机和
）
片;肖像或风景）

CSS2允许您为特定媒体类型（如屏幕或打印）指定样式表。现在，CSS3通过添加媒体查询使其更加高效。

您可以向媒体类型添加表达式以检查特定条件并应用不同的样式表。例如，您可以拥有一个用于大型显示的样式表和一个专门用于移动设备的不同样式表。

它非常强大，因为它允许您在不更改内容的情况下定制到不同的分辨率和设备。

示例：

如果查看区域小于600px，则将应用以下CSS。

@media screen and (max-width: 600px) { .class { background: #ccc; } }

如果要链接到单独的样式表，请在<head>标记之间添加以下代码行。

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

多媒体查询：

您可以合并多个媒体查询。如果查看区域介于600px和900px之间，则将应用以下代码。

@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } }

设备宽度：

如果max-device-width为480px（例如iPhone显示屏），则将应用以下代码。注意：max-device-width表示设备的实际分辨率，max-width表示查看区域分辨率。

@media screen and (max-device-width: 480px) { .class { background: #000; } }

CSS问题与不同的决议

3 个答案: