除了网页内容、布局需要进行响应式设计之外,有时图标也需要针对不同的屏幕尺寸做出相应的调整。
本文简单介绍一个使用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