制作一段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等。现代应用程序使用尽可能少的像素。

如果您想负责在任何时候你的圈子在你的distrubution-map.还可以使用width: 100%为.distribution-map .map-point:active, .distribution-map .map-point:focus, .distribution-map .map-point:hover你的情况我有width: 50%例如将带屏幕的50％，宽度在所有时间，这样你得到响应式设计。

对其他问题的回答： @Joe这是它看起来像1em = 100％≈12pt≈16px的样子。 Ofc如果你有其他的东西，例如20px在body（或者浏览器默认的px - >取决于浏览器），你让你的h1 150％，你会得到30px例如（儿童采用的大小）。当您使用媒体查询时，这非常棒。你只需要改变体内的px，其余的只是适应。至于边框的宽度和高度，您需要有一些标准化程序或重置（或者自己更改为0px），否则您也有默认边框。这就是为什么在css中40％+ 60％的宽度可以高于100％。另一个问题是利润率很奇怪。如果您在宽度上调整大小，边距顶部将会更改...不是高度。我只是尽可能多地使用top，因为只有当你改变窗口的高度时才调整大小。开始的最佳方式是首先为移动设计。（渐进增强），我建议阅读所有的这头先移动网络

来源

2016-04-01 10:13:50 PVL

谢谢你的回答PVL。按照我想要的尺寸（如指定像素）的方式获得这些东西，我是否只是试验百分比以找到合适的尺寸？干杯 – Joe

@Joe查看上面的答案，评论部分太长。 – PVL

我会竭尽全力，为你们打气，帮助PVL！:) – Joe

现在看来，这是一个需要改变只是一个单一的设置：

.distribution-map { 
    width: 100%; 
}

（而不是一个固定的宽度）

来源

2016-04-01 10:55:36 Johannes

感谢您的回答Johannes。我仍然发现，当我将这个宽度设置为100％时，这些圆圈在展开时仍然离开屏幕。干杯 – Joe

制作一段HTML和CSS响应

回答

相关问题