CSS3+SVG 响应式图标设计

除了网页内容、布局需要进行响应式设计之外，有时图标也需要针对不同的屏幕尺寸做出相应的调整。

本文简单介绍一个使用SVG图和CSS3来实现的响应式设计实例。

1. CSS代码，Logo的背景使用了一张svg图片，该图片包含了不同的尺寸的logo元素。

body {
    background: #000;
}
header {
    height: 100vh;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    -webkit-transition: all, 0.5s;
    transition: all, 0.5s;
}
.logo {
    margin: 0;
    padding: 0;
    text-indent: -9999em;
    background: url("/uploads/150101/dd-logo.svg") no-repeat;
    background-position: center -500px;
    height: 300px;
    width: 300px;
}
@media only screen and (min-width: 640px) {
    .logo {
        background-position: center -200px;
    }
}
@media only screen and (min-width: 960px) {
    .logo {
        background-position: center 100px;
    }
}

2. html代码

<div class='container'>
    <header>
        <h1 class='logo'>Deloitte Digital</h1>
    </header>
</div>

在线演示地址： http://wow.techbrood.com/fiddle/4302

拖动改变预览屏幕的尺寸即可看到响应式设计的效果。

by iefreer