HTMLとCSSのセクションを反応的にする

私のウェブサイトは、現時点では完全に反応します（レイアウト、写真など）。私のコードの中には、どのように応答するか分からない部分があります。ここで私は応答したいcodeです：fiddle HTMLとCSSのセクションを反応的にする

それは、ウェブサイトの残りの部分のようにリサイズしますので、私はそれをしたいと思います。誰かがアイデアを持っているなら、私は感謝します！

乾杯

HTML & CSS：

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet' type='text/css'> 
<link href='//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900' rel='stylesheet' type='text/css'> 
<style> 
html 
    color: #e5e5e5; 
    text-align: center; 
    font-family: "Roboto", Helvetica, sans-serif; 
} 

body { 
    max-width: 1200px; 
    margin: 20px auto; 
    padding: 0 100px; 
    overflow-x: hidden; 
} 

.description { 
    max-width: 600px; 
    margin: 0 auto; 
    color: rgba(229, 229, 229, 0.7); 
} 

div, img, footer { 
    position: relative; 
    box-sizing: border-box; 
} 

h1, h2, h3, h4, h5, h6 { 
    margin-bottom: 20px; 
    text-transform: uppercase; 
    font-family: "Roboto Condensed", Helvetica, sans-serif; 
    font-weight: 300; 
} 

h1 { 
    font-size: 36pt; 
} 

h2 { 
    font-size: 24pt; 
} 

h3 { 
    font-size: 18pt; 
} 

h4 { 
    font-size: 16pt; 
} 

h5 { 
    font-size: 14pt; 
} 

h6 { 
    font-size: 12pt; 
} 

p { 
    font-size: 12pt; 
    margin-bottom: 12pt; 
    margin-right: 12px; 
    margin-left: 12px; 

} 

strong { 
    font-weight: 900; 
    font-family: "Roboto Condensed", Helvetica, sans-serif; 
    color: #e5e5e5; 
} 

a { 
    -webkit-transition: color 0.25s ease-in-out; 
    transition: color 0.25s ease-in-out; 
    font-family: "Roboto Condensed", Helvetica, sans-serif; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: #dff3fd; 
} 
a:visited { 
    color: #dff3fd; 
} 
li.active a, a:hover, a:active { 
    color: #e5e5e5; 
} 

.centered { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

.centered-y { 
    position: inline-block; 
    width: auto; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

.distribution-map { 
    position: relative; 
    width: 1190px; 
    padding: 20px; 
    box-sizing: border-box; 
    margin: 0 auto; 
} 
.distribution-map > img { 
    width: 100%; 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 
.distribution-map .map-point { 
    cursor: pointer; 
    outline: none; 
    z-index: 0; 
    position: absolute; 
    width: 40px; 
    height: 40px; 
    border-radius: 20px; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
    opacity: 0.8; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    -moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; 
    -o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; 
    -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out; 
    -webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s; 
    -webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; 
    transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s; 
    background: rgba(26, 26, 26, 0.85); 
    border: 3px solid #dff3fd; 
} 
.distribution-map .map-point .content { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
    opacity: 0; 
    -webkit-transition: opacity 0.25s ease-in-out; 
    transition: opacity 0.25s ease-in-out; 
    width: 100%; 
    height: 100%; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
    transform: translateX(-50%); 
    overflow: overlay; 
} 
.distribution-map .map-point:active, .distribution-map .map-point:focus { 
    position: absolute; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 0; 
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 
    opacity: 1; 
    width: 550px; 
    height: 400px; 
    color: #e5e5e5; 
    z-index: 1; 
    -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out; 
    transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out; 
} 
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content { 
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); 
    opacity: 1; 
    -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    -o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    -webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    -webkit-transition-delay: 0.25s, 0s, 0s; 
    -webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out; 
    overflow: hidden; 
} 
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active { 
    color: #dff3fd; 
} 
     </style> 
</head> 
<body> 
<h1></h1> 
<div class="distribution-map"> 


    <button class="map-point" style="top:24%;left:26.5%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another</h2> 
       <p>details</p> 
       <iframe width="350" height="197" src="https://www.youtube.com/embed/5MgBikgcWnY" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:26%;left:49%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:27.3%;left:71.4%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:63.5%;left:31.5%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another one</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:65%;left:56%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>another one</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
    <button class="map-point" style="top:68%;left:74%"> 
     <div class="content"> 
      <div class="centered-y"> 
       <h2>Another</h2> 
       <p>Details...</p> 
      </div> 
     </div> 
    </button> 
</div>

出典

2016-04-01 Joe

ここで絶対と相対位置を使用しているのはなぜですか？文書の通常の流れからドットを取らなければならない理由はありますか？ – BSMP

あなたはすべてが応答するために割合を使用する必要があります。メディアクエリは必ずしも十分ではありません。ピクセルを忘れることをお勧めします。フォントサイズの場合でも。あなたがする必要があるのは、すべてのh1、h2ではなく、font-sizeの基本ピクセル（ボディ）サイズを変更することだけです。現代のアプリケーションでは、可能な限り少ないピクセルしか使用しません。あなたはすべての回で責任サークルが.distribution-map .map-point:active, .distribution-map .map-point:focus, .distribution-map .map-point:hoverのためにも、あなたのdistrubution-map.でwidth: 100%を使用したい場合は、あなたの場合は

私は、すべての回であなたが応答デザインを取得し、このようにあなたのスクリーンの50％の幅がかかります例えばwidth: 50%持っています。

その他の質問： @Joeこれは1em = 100％≈12pt≈16pxのようです。たとえば、20pxの本体（ブラウザのデフォルトのpx - >ブラウザに依存します）があり、h1を150％にすると、たとえば30pxが得られます（子供はそのサイズを採用します）。メディアクエリーを使用すると素晴らしいことです。あなたは体のpxを変更するだけで、残りの部分は適応します。あなたのボーダーの幅と高さについては、いくつかのノーマライザーまたはリセット（または0pxに自分自身に変更）が必要です。そうでない場合は、デフォルトのボーダーもあります。そのため、40％+ 60％の幅がCSSで100％を超えることができます。別の問題は、マージンが変わってしまうことです。 widthでサイズを変更するとmargin-topが変わります...高さにはありません。ウィンドウの高さを変更したときにのみサイズを変更するので、できるだけ上を使用します。モバイルを最初に設計するのが最善の方法です。（プログレッシブ・エンハンスメント）私が最初にモバイルウェブの頭の中でこのすべてのを読むために

出典

2016-04-01 10:13:50 PVL

答えPVLに感謝します。私が（ピクセル指定のように）これらのものを私が望むサイズにする方法は、ちょうど正しいサイズを見つけるためにパーセンテージで実験しますか？乾杯 – Joe

@ジョーコメントは上記の答えをご覧ください。 – PVL

私はそれをすべて行って、PVLを助けてくれてうれしい！:) – Joe

を示唆してそれを変更する必要があるだけで1つの設定だそうです：

（代わりに固定幅の）

.distribution-map { 
    width: 100%; 
}

出典

2016-04-01 10:55:36 Johannes

答えはヨハネスに感謝します。私はまだその幅を100％に設定すると、サークルが展開されても画面から外れることがわかります。乾杯 – Joe

HTMLとCSSのセクションを反応的にする

答えて

関連する問題