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;
    }

ライブ バージョンは次のとおりです: adamlamakomy.pl。皆様のご協力に感謝いたします。

モバイル版

4

1 に答える 1