ウィンドウのサイズを変更してもサイトを変更しないようにするにはどうすればいいですか？

私はユーザーがウィンドウのサイズを変更したときにページ上の何も移動しないようにしようとしています。しかし、私はまだ異なる画面サイズで同じように見えるサイトを失っています。今はウェブサイトが自分の画像とボタンを動かすからです。ボタンのサイズも変わります。ウィンドウのサイズを変更してもサイトを変更しないようにするにはどうすればいいですか？

* { 
 
    box-sizing: border-box; } 
 

 
#wrapper { 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    width:100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background-color: black; 
 
    font-family: "Source Sans Pro", sans-serif; 
 
    text-align: center; 
 
    color: #ccc; 
 
} 
 

 
div { 
 
    height: 100%; 
 
} 
 

 
canvas { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 

 
h3 { 
 
    position: absolute; 
 
    font-size: 100px; 
 
    font-weight: 100; 
 
    color: white; 
 
    margin-top: 70px; 
 
    margin-left: 80px; 
 
} 
 

 
img { 
 
    margin-top: 230px; 
 
    margin-right: 0px; 
 
} 
 

 
.home { 
 
    position: absolute; 
 
    border: 2px solid #CCCCCC; 
 
    text-align: center; 
 
    color: #ccc; 
 
    font-size: 26px; 
 
    line-height: 60px; 
 
    width: 10%; 
 
    height: 60px; 
 
    margin-top: 180px; 
 
    margin-left: 500px; 
 
} 
 

 
.about { 
 
    position: absolute; 
 
    border: 2px solid #CCCCCC; 
 
    text-align: center; 
 
    color: #ccc; 
 
    font-size: 26px; 
 
    line-height: 60px; 
 
    width: 10%; 
 
    height: 60px; 
 
    margin-top: 180px; 
 
    margin-left: 750px; 
 
} 
 

 
.projects { 
 
    position: absolute; 
 
    border: 2px solid #CCCCCC; 
 
    text-align: center; 
 
    color: #ccc; 
 
    line-height: 60px; 
 
    width: 10%; 
 
    height: 60px; 
 
    font-size: 26px; 
 
    margin-top: 180px; 
 
    margin-left: 1000px; 
 
} 
 

 
.contact { 
 
    position: absolute; 
 
    border: 2px solid #CCCCCC; 
 
    text-align: center; 
 
    color: #ccc; 
 
    line-height: 60px; 
 
    font-size: 26px; 
 
    width: 10%; 
 
    height: 60px; 
 
    margin-top: 180px; 
 
    margin-left: 1250px; 
 
} 
 

 
.home:hover{ 
 
    border-color: #0091FF; 
 
    color: #0091FF; 
 
} 
 

 
.about:hover{ 
 
    border-color: #0091FF; 
 
    color: #0091FF; 
 
} 
 

 
.projects:hover{ 
 
    border-color: #0091FF; 
 
    color: #0091FF; 
 
} 
 

 
.contact:hover{ 
 
    border-color: #0091FF; 
 
    color: #0091FF; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet"> 
 
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
 
    <script type="text/javascript" src="background.js"></script> 
 
    <title>Home</title> 
 
</head> 
 
<body> 
 
    <div id="wrapper"> 
 
    <canvas class='connecting-dots'></canvas> 
 
    
 
    <h3>Title</h3> 
 
    
 
    <a href="#"><div class = "home">Home</div></a> 
 
    <a href="#"><div class = "about">About</div></a> 
 
    <a href="#"><div class = "projects">Projects</div></a> 
 
    <a href="#"><div class = "contact">Contact</div></a> 
 
    
 
    <img src="astronaut.png"> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-03-25 Anonymous

なぜすべてが位置絶対ですか？ –

Idk、私はウェブ開発にちょっと新鮮です。 –

ご理解いただけます。タイトル付きのヘッダーメニューが必要ですか？なぜそれらのキャンバスとimg？ –

分幅セット：とのmin-height：あなたの要素に。それは彼らが小さくなるのを防ぐでしょう、そして、それらが成長するのを防ぐためにあなたは最大幅と最大高さを行うことができます。また、幅：10％から変更します。実数/絶対数に変換します。これは、表示されている画面の10％を表示しています。

http://codepen.io/Squeakasaur/pen/OpwWqG

* { 
    box-sizing: border-box; } 

#wrapper { 
    margin-left:auto; 
    margin-right:auto; 
    width:100%; 
    height: 100%; 
} 

body { 
    background-color: black; 
    font-family: "Source Sans Pro", sans-serif; 
    text-align: center; 
    color: #ccc; 
} 

div { 
    height: 100%; 
} 

canvas { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
} 

canvas { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
} 

h3 { 
    position: absolute; 
    font-size: 100px; 
    font-weight: 100; 
    color: white; 
    margin-top: 70px; 
    margin-left: 80px; 
} 

img { 
    margin-top: 230px; 
    margin-right: 0px; 
} 

.home { 
    position: absolute; 
    border: 2px solid #CCCCCC; 
    text-align: center; 
    color: #ccc; 
    font-size: 26px; 
    line-height: 60px; 
    width: 150px; 
    height: 60px; 
    margin-top: 180px; 
    margin-left: 500px; 
} 

.about { 
    position: absolute; 
    border: 2px solid #CCCCCC; 
    text-align: center; 
    color: #ccc; 
    font-size: 26px; 
    line-height: 60px; 
     width: 150px; 
    height: 60px; 
    margin-top: 180px; 
    margin-left: 750px; 
} 

.projects { 
    position: absolute; 
    border: 2px solid #CCCCCC; 
     min-width: ; 
    text-align: center; 
    color: #ccc; 
    line-height: 60px; 
     width: 150px; 
    height: 60px; 
    font-size: 26px; 
    margin-top: 180px; 
    margin-left: 1000px; 
} 

.contact { 
    position: absolute; 
    border: 2px solid #CCCCCC; 
    text-align: center; 
    color: #ccc; 
    line-height: 60px; 
    font-size: 26px; 
     width: 150px; 
    height: 60px; 
    margin-top: 180px; 
    margin-left: 1250px; 
} 

.home:hover{ 
    border-color: #0091FF; 
    color: #0091FF; 
} 

.about:hover{ 
    border-color: #0091FF; 
    color: #0091FF; 
} 

.projects:hover{ 
    border-color: #0091FF; 
    color: #0091FF; 
} 

.contact:hover{ 
    border-color: #0091FF; 
    color: #0091FF; 
}

出典

2017-03-25 19:21:53 Squeakasaur

これを試しましたが、唯一の問題は、ページの100％に最小幅を設定したいということです。しかし、100％に設定すると、ページのサイズを変更するだけです。 –

要素の最小値と最大値を100％に設定しないでください。またはこれを行う：width：150px;今はすべての幅が10％に設定されています。画面サイズが変更されると、現在の画面の10％と表示されます。あなたがしっかりとした幅を設定しても、問題はありません。 – Squeakasaur

他の画面サイズでも同じように見えるようにします。すべてのものをパーセンテージではなく特定のサイズに設定した場合、他の画面では大きすぎたり小さすぎたりしませんか？ –

ウィンドウのサイズを変更してもサイトを変更しないようにするにはどうすればいいですか？

答えて

関連する問題