[英]font-size same as element width
例: http://www.jpeg.cz/images/2016/05/04/uEf8S.jpg
你好,有可能使font-size
相同width
的元素,並使其反應或必須固定在每一項決議?
HTML:
<h1>Lorem ipsum dolor!</h1>
<div id="form-wrapper">
<form action="#" method="post">
<input type="text" name="fullname" placeholder="Jméno a příjmení" />
<input type="email" name="email" placeholder="E-mail" />
<input type="tel" name="tel" placeholder="Telefon" />
<input type="submit" value="ODESLAT" />
</form>
</div>
CSS:
@media only screen and (max-width: 767px) {
section h1 {
font-size: xx;
}
#form-wrapper {
width: 320px;
}
}
@media (min-width: 768px) {
section h1 {
font-size: xx;
}
#form-wrapper {
max-width: 425px;
}
}
@media (min-width: 1200px) {
section h1 {
font-size: 50px;
font-size: 3.125rem;
}
/* form */
#form-wrapper {
max-width: 590px;
}
}
不是相對於包含元素,但您可以查看/嘗試視口相對單位vw
, vh
, vmin
, vmax
。
文檔 : https : //developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths
瀏覽器支持 : http : //caniuse.com/#feat=viewport-units
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.