使響應式CSS + HTML設計
[英]make responsive a css + html design
問題描述
我創建了一個布局，其中有4列以邊距為中心，三角形是一個箭頭向下箭頭，中間是一個星星。
這在我的計算機上運行良好：
但是三角形和星形離響應很遠，我實現正確定位的唯一方法是絕對位置：
.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;
}
如何將元素置於其他元素之上，並使其以相同的方式響應，即列和邊距如何？
筆記：
4 個解決方案
解決方案1
4 已采納 2017-06-23 09:48:10
這個更新的小提琴怎么樣？
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">★</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>
解決方案2
1 2017-06-20 20:34:36
看看這個。 我需要從頭開始重寫它，因為據我所知，您有很多絕對值，並且它們都是通過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">★</div> </div> </div> <div class="init"> <a href="http://www.xocdetrens.cat/inici/" target="_blank">ENTRA</a> </div> </div> </body>
解決方案3
0 2017-06-24 00:01:12
@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>
解決方案4
0 2017-06-26 05:29:32
您可以簡單地做到這一點。
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 響應式設計
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.