如何根据屏幕尺寸更改图标（图片）的大小？

Question

目前，我将字形设置为字体大小300.但是，当显示在超小屏幕（手机）上时，我希望它以字体大小200显示。有没有办法做到这一点？

Answer 1

您应该查看media queries。

对于手机，您可以这样做：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    .glyphicon {
        font-size: 200px;
    }
}

Answer 2

视口单元也非常适合实现更连续的响应式布局。也就是说，屏幕尺寸会影响文本/图像/等的大小。更确切地说。对于我的网站，我使用了视口单元和aspect-ratio查询来调整元素大小。这是一个使用vh单位的简单小提琴：http://jsfiddle.net/LKwfs/。要查看效果，请更改视口的高度。

HTML：

<h1>Page Title</h1>

样式：

h1 {
    font: bold 5vh/2 Sans-Serif;
    text-align: center;
}

旧浏览器有一个垫片，效果非常好：http://html5polyfill.com/。