使用 ems 的响应式文本大小答案

【问题标题】：Responsive text size using ems使用 ems 的响应式文本大小
【发布时间】：2013-07-25 13:04:59
【问题描述】：

我正在尝试学习一些响应式网页设计技术并尝试以响应式方式编写我的网站。我还不想使用任何框架。我的问题是 ems 中的 div 宽度在移动设备上与在台式机上不同。在桌面上查看时，我的h1 适合 div，而在移动设备上则不适合。这两种情况不应该是一样的吗？所有尺寸均以 em 为单位。

这是我的 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调整手机em的大小吗？
em 的目的不就是要成比例吗？我显然不知道这很重要..
我认为您的部分问题仅仅是由于对em 的不完全理解。查看this link 了解更多信息。在上面。具体到您的项目，文本的左侧位置是您想要的吗？还是定位问题，而不是字体大小问题？
定位是有意的。
如果你的浏览器变小，这个问题也可以在你的电脑上举例说明。问题是ems 不会自动将自己更改为小或大以适应窗口-必须通过@media 查询或javascript 告诉他们这样做。这是你的主要问题

标签： html responsive-design autoresize em

【解决方案1】：

问题是文本大小没有根据窗口重新调整大小。 Here is a great article 帮助您了解响应式调整大小。

要解决此问题，您有几个选择。

首先是使用@media 查询——你甚至可以使用ems！注意：使用ems 时，您应该有一个基础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

【讨论】：

感谢朋友的帮助。抱歉回复晚了。