Как сделать так, чтобы логотип подходил как для ПК, так и для мобильных браузеров?

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

    }