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

【问题标题】：How to change size of icon (picture) based on screen size?如何根据屏幕大小更改图标（图片）的大小？
【发布时间】：2014-07-26 05:44:30
【问题描述】：

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

【问题讨论】：

使用breakpoints。 Bootstrap 使 their predefined breakpoints 与 LESS 一起使用变得容易。

标签： html css twitter-bootstrap screen-size glyphicons

【解决方案1】：

你应该看看media queries。

对于手机，你会这样做：

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

【讨论】：

使用 bootstrap，如果您使用预定义的断点，则最小断点毫无意义。（即@screen-xs-max）。不过，为正确的想法 +1。
我把它放到了我的 CSS 中，但是当我重新调整我的屏幕（缩小到那个大小）时，它并没有改变字形图标的大小。
那是因为查询集中在最小值和最大值device-width。更改浏览器视口不会更改设备参数。将查询修改为@media only screen and (min-width : 320px) and (max-width : 480px)，看看是否可行。

【解决方案2】：

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

HTML：

<h1>Page Title</h1>

样式：

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

有一个适用于旧版浏览器的 shim，它运行良好：http://html5polyfill.com/。

【讨论】：