0

h1タグに文があります。サイズを変更するときは、最後の 3 つの単語が一度に 1 つずつではなく、一緒にジャンプするようにします。最後の 3 つの単語はキャッチフレーズであり、分離すると意味がないからです。ライブ会場はこちら。

HTMLは次のとおりです。

<header class="header" role="banner">
    <div id="inner-header" class="wrap clearfix">
       <div id="title">
       <!-- to use a image just replace the bloginfo('name') with your img src and remove the surrounding <p> -->
        <h1 id="logo" class="h1">
                <a href="<?php echo home_url(); ?>" rel="nofollow">
                    <?php bloginfo('name'); ?><span class="subtitle">
                    <?php bloginfo('description'); ?></span>
                </a>
            </h1>
       </div>
    <nav role="navigation">
       <?php bones_main_nav(); ?>
    </nav>
</div> <!-- end #inner-header -->

そしてscss：

.header {
    #title {
        @include span-columns(23 ,24); 
        position: absolute; 
        top: 30px;
        text-align: center;
    }
    .subtitle {
        font-size: 0.3em; 
        margin-left: 1em;
    }
    .nav { 
        @include span-columns(24 omega ,24); 
        margin-top: 289px;
    }
    #logo {
        a { 
           color: #fff; 
           font-family: 'Pacifico', cursive; /*font-size: 2.5em;*/ 
           text-shadow: 0px 0px 0 #B6CEBF,
                        0.707px 0.707px 0 #B6CEBF,
                        1.414px 1.414px 0 #B6CEBF, 
                        2.121px 2.121px 0 #B6CEBF, 
                        2.828px 2.828px 0 #B6CEBF, 
                        3.536px 3.536px 0 #B6CEBF, 
                        4.243px 4.243px 0 #B6CEBF, 
                        4.95px 4.95px 0 #B6CEBF, 
                        5.657px 5.657px 0 #B6CEBF, 
                        6.364px 6.364px 0 #B6CEBF, 
                        7.071px 7.071px 0 #B6CEBF;
        }
    }
}
4

2 に答える 2

2

これを試して：

.subtitle {
    display: inline-block;
    font-size: 0.3em; 
    margin-left: 1em;
}

displayを toに設定するinline-blockと、要素のコンテンツが一緒に保持されますが (要素の動作block)、他のテキストとインラインのままになります。

また、タイトルを 100% 幅にして、ナビゲーションが適切に配置されるように、他の調整を行うことも検討する必要があります。

#logo {
    margin: 80px 0 0;
}
.header #title {
    height: 289px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}
.header .nav {
    display: inline;
    float: right;
    width: 100%;
}
.header .nav ul {
    /* Add the .clearfix class to this ul */
}
于 2013-01-22T05:14:37.677 に答える
0

ここではレスポンシブ@mediaクエリについて説明します。これを行うにはいくつかの方法がありますが、これが最速です。

次のルールを scss に追加します。

@media only screen and (max-width: 768px) {
    .subtitle{
        display: block;
    }
}

さておき

Bones には他の scss ファイルが付属しており_base.scss、一般的なスタイルの edit が含まれていますが、 のようなサイズ変更編集ファイルのカスタム スタイルの場合は、ファイル_768up.scss内の情報も読んでstyle.scss、メディア クエリに関する詳細情報を取得してください。Bones には素晴らしいドキュメントが付属しています。

参考文献

于 2013-01-22T07:16:19.170 に答える