如何使徽标同时适合 PC 和移动浏览器？

Question

我有一个 Twitter bootstrap 3 应用程序，SVG 徽标在桌面上看起来很棒，但在移动浏览器中看起来被截断了，例如iOS 野生动物园。

我的标准代码如下所示：

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

    }