css - 如何使导航栏上的水平字形显示为垂直菜单

Question

我想在桌面显示器上显示 example A 中的字形，在扩展菜单时在移动设备上显示 example B 中的字形。 (除了 css 之外，两个示例中的代码相同)。

示例 A:http://jsfiddle.net/bs773m84/4/

<div class="container">
    <nav class="header-nav-wrapper container-nav-menu navbar navbar-default white-back">
        <div class="container-fluid">
            <div class="navbar-header">                       
                <a alt="" rel="home" href="google.com">
                    <img class="logo" src="http://icons.iconarchive.com/icons/cornmanthe3rd/plex-android/48/app-drawer-icon.png"/>
                </a>
                <button data-target="#social-menu" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                    <span class="sr-only"><?php _e('Toggle navigation menu','justmakeit');?></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="col-sm-11 content">
                <div class="container-fluid">
                    <div class="hidden-xs col-sm-6   blue-light-back"><span>Brand</span>
                    </div>
                    <div class="col-xs-12 col-sm-4 col-sm-push-4 col-md-push-4 red-dark-back">
                        <div id="social-menu" class="collapse navbar-collapse">
                            <ul class="menu nav navbar-nav navbar-default white-back">
                                <li class="facebook">
                                    <a  href="http://facebook.com" target="_blank">
                                        <span class="glyphicon glyphicon-play-circle"></span><span class="social-name">facebook</span>
                                    </a>
                                </li>
                                <li class="twitter">
                                    <a href="http://twitter.com" target="_blank">
                                        <span class="glyphicon glyphicon-download"></span><span class="social-name">twitter</span>
                                    </a>
                                </li>
                                <li class="google-plus">
                                    <a  href="http://plus.google.com" target="_blank">
                                        <span class="glyphicon glyphicon-download"></span><span class="social-name">google+</span>
                                    </a>
                                </li>
                                <li class="pinterest">
                                    <a href="http://pinterest.com" target="_blank">
                                        <span class="glyphicon glyphicon-download"></span><span class="social-name">pinterest</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

            </div>
        </div>
    </nav>
</div>

示例 A CSS:

#social-menu li{
    display: inline-block;
    padding: 0px;
}
#social-menu li a{
    padding: 0px;
}

#social-menu .social-name{
    display: block;
    height: 1.4375em;
    overflow: hidden;
    text-indent: 100%;
    transition: all 0.3s ease 0s;
    white-space: nowrap;
    width: 1.4375em;
}

示例 B:http://jsfiddle.net/77m94xf4/4/

Html 与 示例 A 中的相同。示例 B css:否。

Answer 1

为此，您可以使用 @media Query 并为每个尺寸设置您的 css 属性。例如:

@media screen and (max-width: 300px)
    {
        add your css for mobile
    }

@media screen and (min-width: 800px)
{
add your css for desctop
}

通过@media Query 你可以为每个设备设置css。例如:手机、平板电脑、台式机。

Learn more about @media query