我将头发拉出来试图将SVG徽标居中并使其按比例缩放。我希望SVG根据屏幕宽度进行缩放，但最大宽度为800px。对于较低的屏幕分辨率，它应缩小。我还需要它在两侧都有40px填充。
每次加载页面或点击徽标时，背景/正文颜色都会随机显示。
以下是我使用的代码：
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<link href="http://static.tumblr.com/y3vtpdx/Lskoeb774/favicon.png" rel="icon" sizes="32x32" type="image/png">
<title>
Accoutrements
</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="UTF-8">
<meta content="Accoutrements is a multidisciplinary studio specialising in art direction, design, photography and screen printing." name="description">
<meta content="accoutrements, art direction, design, manchester, photography, screen printing, studio” name=">
<meta content="index,follow" name="robot">
<meta content="© 2017 Accoutrements All rights reserved." name="copyright">
<meta content="Accoutrements" name="author">
<style>
body {font-family: 'Work Sans', sans-serif;
font-size: 18px;
font-weight: 400;
-webkit-font-smoothing: subpixel-antialiased;
}
.about {
position: fixed;
right: 40px;
bottom: 40px;
}
.shop {
position: fixed;
right: 40px;
top: 40px;
}
.studio {
position: fixed;
left: 40px;
top: 40px;
}
.mood {
position: fixed;
left: 40px;
bottom: 40px;
}
a {
text-decoration: none;
}
svg.logo
{
position: absolute;
max-width: 80%;
top: 10%;
left: 10%;
}
svg.logo:empty
{
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media screen and (orientation: portrait) {
svg.logo {
max-width: 90%;
}
}
@media screen and (orientation: landscape) {
svg.logo {
max-height: 90%;
}
}
</style>
</head>
<body>
<div class="corner_link about">
<a href="/about">About</a>
</div>
<div class="corner_link shop">
<a href="/">Shop</a>
</div>
<div class="corner_link studio">
<a href="/">Studio</a>
</div>
<div class="corner_link mood">
<a href="/">Mood</a>
</div>
<div class="accoutrements">
<svg class="logo" id="accoutrements" viewbox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
<title>
Accoutrements
</title>
<path d="M32,160H24l-2,40H0L12,0H44L56,200H34ZM28,48l-4,88h8Z"></path>
<path d="M494,0h30l4,100L532,0h30V200H540V88l-8,112h-8L516,88V200H494Z"></path>
<path d="M650,0l8,112V0h20V200H652L644,74V200H622V0Z"></path>
<polygon points="318 0 318 24 332 24 332 200 356 200 356 24 370 24 370 0 318 0"></polygon>
<polygon points="686 0 686 24 700 24 700 200 724 200 724 24 738 24 738 0 686 0"></polygon>
<polygon points="466 24 486 24 486 0 442 0 442 200 486 200 486 176 466 176 466 112 482 112 482 88 466 88 466 24"></polygon>
<polygon points="594 24 614 24 614 0 570 0 570 200 614 200 614 176 594 176 594 112 610 112 610 88 594 88 594 24"></polygon>
<path d="M118,90V28c0-8.13-1.94-14.87-6-20S101.87,0,92,0H88C78.13,0,72.05,2.87,68,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H94v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M182,90V28c0-8.13-1.94-14.87-6-20s-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H158v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M240,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V28C246,19.87,244.06,13.13,240,8ZM222,174a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0Z"></path>
<path d="M286,0V174a4,4,0,0,1-8,0V0H254V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V0Z"></path>
<path d="M434,76V20c0-16-7.16-20-16-20H378V200h24V112h4a4,4,0,0,1,4,4v84h24V108c0-6-2-14-10-14C434,94,434,81.52,434,76Zm-24,8a4,4,0,0,1-4,4h-4V22h4a4,4,0,0,1,4,4Z"></path>
<path d="M794,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V74c0,6.19.24,9.49,2,14s5.77,9.94,10,14l10,10c1.94,1.95,10,8,10,14v48a4,4,0,0,1-8,0V118H744v54c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V126c0-6.9-.06-11.76-2-16s-5.07-7.4-10-12c0,0-6.43-6.07-12-12-4.25-4.53-8-8.61-8-12V26a4,4,0,0,1,8,0V82h24V28C800,19.87,798.06,13.13,794,8Z"></path></svg>
<script>
var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
var rand = function() {
return Math.floor(Math.random() * 6);
};
var randomColor = function() {
var r = safeColors[rand()];
var g = safeColors[rand()];
var b = safeColors[rand()];
return "#" + r + g + b;
};
var color_1 = randomColor();
var color_2 = randomColor();
$(document).ready(function() {
color_change();
$('#accoutrements').click(function() {
color_change();
});
});
function color_change() {
color_1 = randomColor();
color_2 = randomColor();
$('.corner_link a').css('color', color_1);
$('.accoutrements').css('fill', color_1);
$('body').css('background', color_2);
$('.corner_link a').hover(function(){ $(this).css('color',color_2).css('background-color',color_1); }, function(){ $(this).css('color',color_1).css('background-color','transparent'); });
}
</script>
</div>
</body>
非常感谢你的帮助！
答案 0 :(得分：0)
一旦我删除以下媒体查询，您的代码就可以完全按照要求运行。徽标居中且响应迅速，随着屏幕宽度的缩小而缩小。
@media screen and (orientation: portrait) {
svg.logo {
max-width: 90%;
}
}
现在，根据您的问题，我认为您可能希望将徽标的大小限制为800px。这是一旦徽标达到800px宽度，它应该保持800px宽，然后将其自身对准中心。 如果是这样，可以通过以下媒体查询来实现。
@media screen and (min-width: 1000px) {
svg.logo {
max-width: 800px;
position: inherit; /* Removing position: absolute */
margin-top: 10vh; /* Equivalent to having top: 10% */
/* The following lines will horizontally center the logo. */
display: block;
margin: auto;
}
}
徽标的最大宽度设置为80％。因此，一旦屏幕宽度为1000px，徽标将变为800px宽。因此，对于1000px及以上的屏幕尺寸，我们绝对指定最大宽度（不是百分比）以防止它增长。因此，一旦屏幕为1000px或更高，徽标大小将保持固定，并保持集中，并且距离屏幕顶部为10％。
尝试一下，看看它是不是你想要的。否则请澄清您的问题。 我正在使用Google Chrome 58并使用开发工具来检查响应能力。