0
別の画面に表示されたときに私のウェブサイトを動かさないようにするのが非常に困難です。それは、携帯電話の画面とコンピュータの画面で、もっと混乱しているように見えます。ここに私のコードです。ウィンドウのサイズが変更されたときにウェブページが乱れる
<html>
<head>
<style>
#logo img {
width: 120px;
margin-top: 20px;
margin-left:350px;
}
#footer img {
width: 450px;
margin-top: 20px;
margin-left:250px;
}
#girl img {
width: 450px;
margin-top: 20px;
margin-left:200px;
}
#follow_us img {
width: 250px;
margin-top: 20px;
margin-left:300px;
}
img.NICE {
position: absolute;
left: 200px;
top: 0px;
z-index: -1;
}
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
margin:0;
padding:0;
border-width:0;
}
body {
-epub-hyphens:auto;
}
div.Basic-Text-Frame {
border-style:solid;
}
p.Basic-Paragraph {
color:#000000;
font-family:"Minion Pro", serif;
font-size:12px;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.2;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
orphans:1;
page-break-after:auto;
page-break-before:auto;
text-align:left;
text-decoration:none;
text-indent:0;
text-transform:none;
widows:1;
}
p.ParaOverride-1 {
text-align:justify;
text-align-last:center;
}
span.CharOverride-1 {
color:#525358;
font-family:Raleway, sans-serif;
font-size:16px;
font-style:normal;
font-weight:200;
}
span.CharOverride-2 {
font-family:Raleway, sans-serif;
font-size:16px;
font-style:normal;
font-weight:200;
}
span.CharOverride-3 {
color:#98c3d0;
font-family:Raleway, sans-serif;
font-size:16px;
font-style:normal;
font-weight:200;
}
span.CharOverride-4 {
color:#f9a05d;
font-family:Raleway, sans-serif;
font-size:16px;
font-style:normal;
font-weight:200;
}
span.CharOverride-5 {
color:#31373c;
font-family:Raleway, sans-serif;
font-size:8px;
font-style:normal;
font-weight:normal;
}
span.CharOverride-6 {
font-family:Raleway, sans-serif;
font-size:8px;
font-style:normal;
font-weight:normal;
}
span.CharOverride-7 {
color:#525358;
font-family:Raleway, sans-serif;
font-size:9px;
font-style:normal;
font-weight:600;
}
a.button {
background: url(http://i.imgur.com/tnWFc1M.png) 1px 5px no-repeat;
background-size: 100px 20px;
border: none;
color: white;
padding: 25px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 6px;
margin: 9px 300px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
a.button1 {
background: url(http://i.imgur.com/Dh3VnPe.png) 2px 6px no-repeat;
background-size: 101px 22px;
border: none;
color: white;
padding: 25px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 6px;
margin: -65px 400px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
</style>
</head>
<div id="logo_info">
<p id="logo"><img src="http://i.imgur.com/aukUVxR.png" alt="Bethan Rainforth a comedic dancer">
</p>
</div>
<body id="TEXT" lang="en-US">
<div id="_idContainer000" class="Basic-Text-Frame">
<div id="header">
<hr>
</div>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-1">our</span><span class="CharOverride-2"> </span><span class="CharOverride-3">name</span><span class="CharOverride-2"> </span><span class="CharOverride-1">is our</span><span class="CharOverride-2"> </span><span class="CharOverride-4">mission</span></p>
</div>
<div id="_idContainer001" class="Basic-Text-Frame">
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">We are a non-profit organization, founded by a medical doctor and eye surgeon. </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">Our mission is to help people access vision care more effectively and conveniently. </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">We prioritize low-income children and members of underserved communities by </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">delivering eyecare for free to pre-schools, after-school programs, community centers </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">and events. We also extend our services to individuals who are able to pay for </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">exceptional eyecare delivered with the ease and convenience of services like Uber </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">and Lyft. We will come to you and provide unprecedented levels of access to doctors. </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">Being a non-profit organization, money collected helps us increase awareness of health </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">and education and provide free services to those who otherwise cannot afford it. </span><span class="CharOverride-6"> </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-7">To schedule an exam, please select from the following:</span></p>
</div>
<div id="buttonsz">
<a href="http://www.willgrantvision.com" class="button">Go to WillGrant</a>
<a href="http://www.willgrantvision.com" class="button1">Go to WillGrant</a>
</div>
<hr>
<div id="header">
<p id="girl"> <img src="http://i.imgur.com/ac4JwDA.png" alt="Bethan Rainforth a comedic dancer">
<p id="girl"> <img src="http://i.imgur.com/FXF5Ysh.png" alt="Bethan Rainforth a comedic dancer">
</p>
<p id="follow_us"> <img src="http://i.imgur.com/ZU53otY.png" alt="Bethan Rainforth a comedic dancer">
</p>
</div>
</body>
</html>
これは期待される出力です。 
これはレスポンスと呼ばれるWeb開発の全体的なコンセプトです...フレックスボックスを利用することをお勧めします。これは、特に画面のサイズが変更されたときにコンテナ内の要素の位置を制御するのに役立ちます。 – StefanBob