Question

我正在尝试学习一些响应式网页设计技术，并尝试以响应方式对我的网站进行编码。我还不想使用任何框架。我的问题是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。我感谢你的帮助。

mobile version

Answer 1

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

要解决此问题，您可以选择一些选项。

首先是使用@media查询 - 您甚至可以使用em s！注意：使用em时，您应该有一个基础em，其他所有（包括宽度，高度和其他字体大小）都基于。{1}}。然后，您可以通过更改一个字体大小来影响所有内容。例如

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

使用ems的响应文本大小

1 个答案: