0

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

手机版

4

1 回答 1

2

The problem is that the text sizes are not re-sizing based on the window. Here is a great article to help you understand responsive re-sizing.

To fix this you have a few options.

The first is to use @media queries - you can even still use ems! Note: when using ems you should have a base em that all others (including width, height, and other font sizes) are based off of. You can then affect everything by changing that one font size. For example

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

This would make all the text you have half it's original size when the screen is smaller than 25em width

A second option would be to use javascript (this uses jQuery as well) to do it. I quickly pulled this example from this SO post, you can probably find or come up with a more eloquent solution if you want to use this method. Here is that example

$(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);
}

Or you could use a plugin which I don't recommend for paragraphs of text, but for your small amount they would work fine. Two of the most common ones are FitText and BigText

于 2013-07-26T13:16:45.990 回答