私はそれを動作させて見栄えが良いとすれば、基本的なウェブサイトをコーディングしてポートフォリオとして使うことができます。コンテナdivが機能しない(ページのサイズ変更を中止しようとしています)
残念ながら、私がこれまでに持っていたことは、フルサイズでない限り、ひどく見えます。私はそれが一時的な修正としてサイズ変更されないようにしたいが、min-heightとmin-widthは機能していない。これまでに私が見つけたサイズ変更を止めるための解決策はありませんでした。
私のコードはひどいですが、だれでも私のページのサイズ変更を防ぐことができますか?
body {
background-color: #91bfe6;
margin:0;
padding:0;
color: #fff;
font-family: "Trebuchet MS",Helvetica,sans-serif;
}
.container {
min-width: 1920;
min-height: 1080;
}
.p01 {
color: #fff;
text-align: left;
font-family: "Book Antiqua",Palatino,serif;
font-size: 13px;
line-height: 5%;
letter-spacing: 2px;
}
.p02 {
color: #fff;
text-align: right;
font-family: "Trebuchet MS",Helvetica,sans-serif;
font-size: 30px;
line-height: 5%;
letter-spacing: 8px;
word-spacing: 30px;
}
.p03 {
color: #fff;
text-align: right;
font-family: "Book Antiqua",Palatino,serif;
font-size: 10px;
position: fixed;
right: 4px;
top: 62px;
}
.p04 {
color: #fff;
font-family: "Trebuchet MS",Helvetica,sans-serif;
text-align: left;
font-size: 32px;
line-height: 5%;
letter-spacing: 8px;
word-spacing: 30px;
position: relative;
top: 15px;
z-index: 1;
}
#bottomtext {
position: fixed;
bottom: 30px;
left: 24px;
}
#footer {
position: fixed;
right: 4px;
top: 62px;
}
#header {
position: fixed;
left: 24px;
top: 11px;
}
#links {
position: fixed;
right: 112px;
top: 10px;
}
h1 {
color: #fff;
font-family: "Trebuchet MS",Helvetica,sans-serif;
text-align: left;
line-height: 5%;
letter-spacing: 6px;
}
a:link {
color: #fff;
text-decoration: none;
}
a:visited {
color: #fff;
text-decoration: none;
}
#rectangle {
background: #834f47;
position: fixed;
top: 86px;
height: calc(100vh - 86px);
width: 100%;
overflow: hidden;
z-index: -1;
}
#img5 {
position: fixed;
top: 86px;
margin-right: 40px;
}
#img6 {
position: fixed;
top: 86px;
}
#img7 {
position: fixed;
top: 86px;
}
#img8 {
position: fixed;
top: 86px;
}
#text {
text-align: center;
margin: auto;
width: 50%;
padding: 0px;
}
#storememo {
text-align: center;
margin: auto;
width: 50%;
padding: 0px;
}
#contact {
display: block;
margin: auto;
width: 20%;
}
h1 {
font-size: 210%;
}
<div class="container">
<div id="header">
<h1><a href="Index.html">MY NAME</a></h1>
<p class="p01">
<a href="illustration.html">illustration</a> - <a href="3D.html">3D </a>- <a href="animation.html">animation </a>- <a href="graphicdesign.html">graphic design</a>
</p>
</div>
<div id="links">
<p class="p02">
<a href="about.html">ABOUT </a> | <a href="contact.html"> CONTACT </a> | <a href="storelink.html"> STORE </a>
</p>
</div>
<div id="bottomtext">
<p class="p04">ILLUSTRATION</p></div>
<div id="rectangle"></div>
<div id="img5">
<a href="placeholder.html">
<img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/>
</a>
</div>
<div id="img6">
<a href="placeholder.html">
<img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/>
</a>
</div>
<div id="img7">
<a href="placeholder.html"><img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/>
</a>
</div>
<div id="img8">
<a href="placeholder.html">
<img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/>
</a>
</div>
<div id="img9">
<a href="placeholder.html">
<img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/>
</a></div>
<div id="footer">
<footer>
<p class="p03">(c) MY NAME </p>
</footer>
</div>
</div>
あなたは、 "リサイズからあなたのページを防ぐ" あなたは自分のブラウザでページのサイズを変更するからユーザーを防ぐにrefferingされていると言うとき?それは不可能だからです。それとも、ウィンドウのどの部分が表示されているかに基づいて要素を切り捨てる(縮尺しない)と言っていますか?または、窓の大きさに基づいてすべてをスケールダウンすると言っていますか? –
また、[MCVE]を投稿すると、より速くヘルプが表示されます。 –
私は要素を切り捨てる(縮尺しない)ので、要素の代わりにページの残りの部分を見るためのスクロールバーがあることを意味します。リンクをありがとう、私は次の時間に心に留めておきます。 – Pascal