我正在嘗試學習一些響應式網頁設計技巧並嘗試以響應式方式編寫我的網站。我不想使用任何框架。我的問題是,ems中的div寬度在手機上比桌面上的寬度不同。在桌面上觀看時,我的h1
適合div,而在移動設備上則不適用。兩種情況下都不應該這樣嗎?所有尺寸都在em中。使用ems響應文本大小
這裏是我的HTML代碼:
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Sieć z pasją</title>
<link rel="stylesheet" href="css/style.css">
<!-- Google webfonts -->
<!-- font-family: 'Expletus Sans', cursive; -->
<link href='http://fonts.googleapis.com/css?family=Expletus+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="transparent-bg">
<h1><span class="hello">Hello</span>
</br><span class="is">my name is</span>
</br><span class="adam">Adam</span></h1>
</div>
</body>
</html>
CSS:
body {
background:url('../img/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
.transparent-bg {
background-color:rgba(185,178,160,0.6);
padding:2em;
padding-top:5em;
max-width:30em;
position:relative;
left:4em;
top:5em;
}
h1 {
font-family: 'Expletus Sans', cursive;
color:black;
line-height:1em;
}
span.hello {
font-size:4em;
}
span.is {
letter-spacing:0.4em;
position:relative;
left:0.3em;
}
span.adam {
font-size:3em;
letter-spacing:0.15em;
position:relative;
top:0.3em;
}
這裏是一個真人版:adamlakomy.pl。我感謝你的幫助。
您是否嘗試過使用['@ media' queries](http://css-tricks.com/css-media-queries/)來調整移動「em」大小? –
是不是em的目的是成比例的?我obviusly不知道......很重要.. – Glorifind
我認爲你的問題的一部分,僅僅是由於對'em'的非完美理解。查看[此鏈接](http://www.impressivewebs.com/understanding-em-units-css/)以獲取更多信息。在上面。至於你的項目,具體是,你想要的文本的左側定位?或者它是一個定位問題,而不是一個字體大小? –