我在平行四边形中有一些文字,问题是当我调整窗口大小时文本丢失了所有属性,我尝试过vw,vh,em,pt,rem和px 我也试过@media屏幕和(min-width:320px;) 但是看起来没有用,目前这是我到目前为止所做的,我希望你能帮助我。
.paralelo {
margin-top: 8%;
margin-left: 0%;
padding-left: 0;
text-align: right;
width: 48%;
height: 50%;
max-height: 10px;
border-top: 50px solid #c5027f;
border-right: 30px solid #FFf;
}
.who {
font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 3em;
font-weight: 400;
color: white;
margin-top: -21.5%;
margin-right: 12px;
}
<div class="paralelo">
<p class="who">Servicios</p>
</div>
答案 0 :(得分:1)
尝试使用position
,例如:
.paralelo {
position: relative; /* -- add this line */
margin-top: 8%;
margin-left: 0%;
padding-left: 0;
text-align: right;
width: 48%;
height: 50%;
max-height: 10px;
border-top: 50px solid #c5027f;
border-right: 30px solid #FFf;
}
.who {
position: absolute; /* -- add this line */
top: -100px; /* -- add this line */
right: 12px; /* -- add this line */
font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 3em;
font-weight: 400;
color: white;
/* margin-top: -21.5%; -- remove this line */
/* margin-right: 12px; -- remove this line */
}
&#13;
<div class="paralelo">
<p class="who">Servicios</p>
</div>
&#13;
here is jsfiddle so you can resize screen
read more about how to use position here
评论后更新
以下是vw
的示例,因此如果您调整屏幕大小,它会相应地更改所有尺寸https://jsfiddle.net/5x7p6fsr/1/