我想根据带有@media 关键字的显示分辨率通过css 加载背景图像。它在 Firefox 和 chrome 中工作正常,但在 Safari 中不起作用。有什么我想念的吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Snowboardschule: Skigebiet</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/fileadmin/css/style.css?1496823820" media="all" title="main">
<style type="text/css">@media(min-resolution: 1dppx){ .trailer { background-image: url(fileadmin/_processed_/e/d/csm_trailer1_ca6cb9b743.jpg); }}</style>
</head>
<body>
<header>
<div class="trailer">
...
</div>
</header>
</body>
</html>
最佳答案
尝试使用
<style type="text/css">
@media and screen (min-resolution: 1dppx)
{ .trailer { background-image: url(fileadmin/_processed_/e/d/csm_trailer1_ca6cb9b743.jpg); }}
</style>
关于css 样式标签未在 safari 中评估,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44408604/