Question

我有一个twitter bootstrap 3应用程序，并且SVG徽标在台式机中看起来不错，但在移动浏览器中却被截断了，例如iOS Safari。

我非常标准的代码如下：

<!-- RD Navbar Brand-->
<div class="rd-navbar-brand brand">
   <a class="brand-name" href="/"><img src="images/logo.svg" height="100"></img></a>
</div>

例如，是否有一种方法可以在检测到移动设备时减小徽标大小？

Answer 1

您可以使用以下媒体查询：

    /* Large desktops and laptops */
    @media (min-width: 1200px) {
        .my-logo {
            width:300px;
        }
    }

    /* Landscape tablets and medium desktops */
    @media (min-width: 992px) and (max-width: 1199px) {
         .my-logo {
            width:250px;
        }
    }

    /* Portrait tablets and small desktops */
    @media (min-width: 768px) and (max-width: 991px) {
        .my-logo {
            width:200px;
        }
    }

    /* Landscape phones and portrait tablets */
    @media (max-width: 767px) {
        .my-logo {
            width:150px;
        }
    }

    /* Portrait phones and smaller */
    @media (max-width: 480px) {
         .my-logo {
            width:100px;
        }

    }

如何使徽标适合PC和Mobile浏览器？

1 个答案: