使用ems響應文本大小

我正在嘗試學習一些響應式網頁設計技巧並嘗試以響應式方式編寫我的網站。我不想使用任何框架。我的問題是，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。我感謝你的幫助。

mobile version

來源

2013-07-25 Glorifind

您是否嘗試過使用['@ media' queries]（http://css-tricks.com/css-media-queries/）來調整移動「em」大小？ –

是不是em的目的是成比例的？我obviusly不知道......很重要.. – Glorifind

我認爲你的問題的一部分，僅僅是由於對'em'的非完美理解。查看[此鏈接]（http://www.impressivewebs.com/understanding-em-units-css/）以獲取更多信息。在上面。至於你的項目，具體是，你想要的文本的左側定位？或者它是一個定位問題，而不是一個字體大小？ –

的問題是，文本大小不調整大小基於窗口的。 Here is a great article，以幫助您瞭解響應式重新調整大小。

要解決這個問題，你有幾個選擇。

首先是使用@media查詢 - 你甚至可以使用em s！注意：當使用em s時，您應該有一個基地em所有其他（包括寬度，高度和其他字體大小）基於。然後，您可以通過更改該字體大小來影響所有內容。例如

media all and (max-width: 25em) { 
    html { 
    font-size:50%; 
    } 
}

這將使所有文本你有一半是原來的尺寸時，屏幕小於25em寬度

第二個選擇是使用JavaScript（這使用jQuery的一樣）做它。我很快從this SO post中拉出了這個例子，如果你想使用這種方法，你可能會發現或提出一個更有說服力的解決方案。下面是一個例子

$(function() { 
    $(window).bind('resize', function() 
    { 
     resizeMe(); 
     }).trigger('resize'); 
}); 
function resizeMe() { 
    //Standard height, for which the body font size is correct 
    var preferredHeight = 768; 

    var displayHeight = $(window).height(); 
    var percentage = displayHeight/preferredHeight; 
    var newFontSize = Math.floor(/*default font size*/ * percentage) - 1; 
    $("body").css("font-size", newFontSize); 
}

或者你可以使用它，我不建議對文本的段落插件，但對於你的少量他們會很好地工作。其中兩個最常見的是FitText和BigText

來源

2013-07-26 13:16:45

感謝您的幫助。抱歉遲了迴應。 – Glorifind

使用ems響應文本大小

回答

相關問題