做出响应的CSS + HTML设计

问题描述：

我创建了保证金和一个三角形在中间的明星箭头向下中心的4列的布局......做出响应的CSS + HTML设计

，这是很好的工作在我的电脑：

但三角形和星是远来响应，只有这样，我实现了正确定位它是绝对位置：

.triangle-down { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 318px; 
    width: 0; 
    height: 0; 
    border-left: 532px solid transparent; 
    border-right: 532px solid transparent; 
    border-top: 400px solid blue; 
} 

.star { 
    display: block; 
    position: absolute; 
    vertical-align: middle; 
    font-size: 250px; 
    text-align: center; 
    color: white; 
    top: -434px; 
    left: -109px; 
}

我怎样才能把元素在他人之上，并使它在s中响应Ame方式列和它的利润率？

注：

布局是一个倒计时，但是JavaScript并不是对这个问题很重要。
你可以找到一个功能（没有JS）小提琴here
你可以看到实际的结果（与JS）here
我可以使用sass如果有必要

所以，你需要才达到相同的结果，关于图片，但在回应的方式？ – QuestionAndAnswer

@QuestionAndAnswer yes ....或者至少可以以某种方式调整大小... – joc

答

这个怎么样更新小提琴？

https://jsfiddle.net/ondrakoupil/0rtvcnon/11/

基本上，这些都是变化：

使用Flexbox的列布局
尺寸使用视区相对单位（VW）测量
三角形作为标准的矩形创建<div>并通过CSS旋转 - 您可以更好地控制其位置和大小

使用了一些CSS3技术。对于IE，你需要在CSS中使用前缀（使用Autoprefixer）。其他浏览器应该“照原样”处理它。

html, body { 
 
    height: 100%; 
 
    margin: auto; 
 
    padding-left:1%; 
 
    background: yellow; 
 
    font: normal 16px 'Roboto', sans-serif; 
 
} 
 

 
.container { 
 
    margin: auto; 
 
    width: 80%; 
 
    height: 100%; 
 
    position: relative; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.bar { 
 
    background: red; 
 
    font-weight: 700; 
 
    text-align: center; 
 
    color: yellow; 
 
    width: 15%; 
 
} 
 

 
.init { 
 
    position:absolute; 
 
    bottom: 10px; 
 
    right: 20px; 
 
    background: yellow; 
 
    margin-left: 0px; 
 
    font-weight: 700; 
 
    text-align: right; 
 
    color: red; 
 
} 
 

 
a:link, a:visited { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 

 

 
::-moz-selection { 
 
    color: yellow; 
 
    background: red; 
 
} 
 

 
::selection { 
 
    color: yellow; 
 
    background: red; 
 
} 
 

 
p.numbers { 
 
    font-size: 8vw; 
 
    margin-top: 45vw; 
 
    margin-bottom: 20px; 
 
} 
 

 
p.meta, p.strings { 
 
    font-size: 2vw; 
 
} 
 

 
h1 { 
 
    font-size: 4.5em; 
 
} 
 

 
.triangle-down { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    pointer-events: none; 
 
} 
 

 
.triangle-color { 
 
    margin: auto; 
 
    width: calc(80vw/1.4142); 
 
    height: calc(80vw/1.4142); /* sqrt of 2 */ 
 
    background-color: blue; 
 
    transform: translateY(calc(-1 * 80vw/1.4142/2)) rotate(45deg); 
 
} 
 

 
.star { 
 
    position: absolute; 
 
    vertical-align: middle; 
 
    font-size: 15vw; 
 
    text-align: center; 
 
    color: white; 
 
    top: 5vw; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 
}

<body> 
 
    <div class="container">  
 
     <div class="triangle-down"> 
 
     <div class="triangle-color"></div> 
 
      <div class="star">&#9733;</div> 
 
     </div> 
 
     <div class="bar"> 
 
      <p id="d" class="numbers days">00</p> 
 
      <p class="strings">DIES</p> 
 
     </div> 
 
     <div class="bar"> 
 
      <p id="h" class="numbers hours">00</p> 
 
      <p class="strings">HORES</p> 
 
     </div> 
 
     <div class="bar"> 
 
      <p id="m" class="numbers minutes">00</p> 
 
      <p class="strings">MINUTS</p> 
 
     </div> 
 
     <div class="bar"> 
 
      <p id="s" class="numbers seconds">00</p> 
 
      <p class="strings">SEGONS</p> 
 
     </div> 
 
    </div> 
 
    <div class="init"> 
 
     <a href="http://www.xocdetrens.cat/inici/" target="_blank">ENTRA</a> 
 
    </div>  
 
</body>

答

看看这个。我需要从头开始重写它，因为你有很多绝对值，并且他们都是通过js来计算的，据我所知。希望这会满足你的要求。

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
    font: normal 16px 'Roboto', sans-serif; 
 
    position: relative; 
 
} 
 

 
.triangle-aspect-keeper { 
 
    width: 50%; 
 
    padding-bottom: 50%; 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.triangle-container { 
 
    
 
} 
 

 
.triangle-down { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    transform: rotate(45deg); 
 
    position: absolute; 
 
    top: -50%; 
 
    left: 0; 
 
} 
 

 
.star { 
 
    font-size: 1100%; 
 
    text-align: center; 
 
    color: white; 
 
    width: 100%; 
 
    line-height: 200%; /* control star vertical position */ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.bar-container { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.bar-inner-container { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: calc(50% * 1.41); /* sqrt(2) = 1.41. Length of the diagonal of the square*/ 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.bar:first-child { 
 
    margin-left: 0; 
 
} 
 

 
.bar { 
 
    background-color: red; 
 
    height: 100%; 
 
    width: 15%; 
 
    color: yellow; 
 
    font-weight: 700; 
 
} 
 

 
p.numbers { 
 
    font-size: 5em; 
 
    margin-top: 350%; 
 
} 
 

 
p.meta, p.strings { 
 
    font-sie: 1.5em; 
 
} 
 

 
a:link, a:visited { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 

 
.init { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    padding: 10px; 
 
    font-weight: 700; 
 
}

<body> 
 
    <div class="container"> 
 
     <div class="bar-container"> 
 
      <div class="bar-inner-container"> 
 
       <div class="bar bar-first"> 
 
        <p id="d" class="numbers days">00</p><br> 
 
        <p class="strings">DIES</p><br> 
 
       </div> 
 
       <div class="bar bar-second"> 
 
        <p id="h" class="numbers hours">00</p><br> 
 
        <p class="strings">HORES</p><br> 
 
       </div> 
 
       <div class="bar bar-third"> 
 
        <p id="m" class="numbers minutes">00</p><br> 
 
        <p class="strings">MINUTS</p><br> 
 
       </div> 
 
       <div class="bar bar-fourth"> 
 
        <p id="s" class="numbers seconds">00</p><br> 
 
        <p class="strings">SEGONS</p><br> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="triangle-aspect-keeper"> 
 
      <div class="triangle-container"> 
 
       <div class="triangle-down"></div> 
 
       <div class="star">&#9733;</div> 
 
      </div> 
 
     </div> 
 
     <div class="init"> 
 
      <a href="http://www.xocdetrens.cat/inici/" target="_blank">ENTRA</a> 
 
     </div> 
 
    </div> 
 
</body>

对于迟到的回答感到抱歉，直到现在没有时间...我真的很感谢你的工作，但这不是我所需要的，是固定的大小不能调整大小或响应...），我会在20分钟内开始赏金，随时提高您的答案;），另外，在我的建议中，没有使用样式元素的JavaScript ... – joc

@joc，你见过吗代码中的评论说你可以使用persents或rems？看看'''.triangle-container'''。唯一硬编码的东西是体宽，它只代表窗口大小和三角形大小，可以切换到百分比。你是如何测试这种布局的可调整大小的？ – QuestionAndAnswer

@joc，你能解释一下它在这种情况下不响应吗？什么打破了这里的责任？ – QuestionAndAnswer

答

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
html, 
 
body { 
 
    background: yellow; 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 

 
.row { 
 
    height: 100%; 
 
} 
 

 
.col-xs-3 { 
 
    height: 100%; 
 
} 
 

 
.col-xs-3, 
 
.col-xs-12 { 
 
    padding: 0 6.25%; 
 
} 
 

 
.bar { 
 
    color: yellow; 
 
    background: red; 
 
    min-height: 100%; 
 
    padding-top: 333%; 
 
} 
 

 
.triangle-down { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: auto; 
 
    z-index: 1; 
 
} 
 

 
.triangle-color { 
 
    margin-bottom: -30%; 
 
} 
 

 
.triangle-color * { 
 
    fill: blue 
 
} 
 

 
.star * { 
 
    fill: white 
 
} 
 

 
.numbers { 
 
    font-size: 5vw; 
 
    padding-bottom: 2vw; 
 
} 
 

 
.strings { 
 
    font-size: 1.5vw; 
 
}

<div class="container text-center"> 
 
    <div class="row triangle-down"> 
 
    <div class="col-xs-12"> 
 
     <svg class="triangle-color" viewBox="0 0 100 40"> 
 
     <polygon points="0,0 100,0 50,40"/> 
 
     </svg> 
 
     <svg class="star" viewBox="0 0 1400 188"> 
 
     <polygon points="700,0 640,188 790,68 610,68 760,188"/> 
 
     </svg> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-3"> 
 
     <div class="bar"> 
 
     <div class="numbers">00</div> 
 
     <div class="strings">DIES</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <div class="bar"> 
 
     <div class="numbers">00</div> 
 
     <div class="strings">HORES</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <div class="bar"> 
 
     <div class="numbers">00</div> 
 
     <div class="strings">MINUTS</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <div class="bar"> 
 
     <div class="numbers">00</div> 
 
     <div class="strings">SEGONS</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

答

你可以简单地做到这一点。

HTML：

<div class="parent"> 
    <div class="triangle"> 
    <div class="star"> 
     ... 
    </div> 
    </div> 
</div>

CSS：

.parent { 
    width: xx%; /*Whatever percentage*/ 
    height: yy%; /*Whatever percentage*/ 
    margin: 0 auto; 
    position: relative; 
} 

.triangle { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.star { 
    font-size: xx%; /*some percentage (assuming star is a font icon)*/ 
    position: absolute; 
    top: 15vh; 
    margin: 0 auto; 
}

做出响应的CSS + HTML设计

相关推荐