Question

我试图修改网站以使其响应。我有一个用于桌面网站的水平标题图像（＆gt; 700px）和一个在较小网站上具有css背景的垂直图像（＆lt; 700px）。

我已经完成了所有工作，但在Firefox中，基本桌面映像无法替换。我已经掌握了各种各样的方法，但无法让Firefox一起玩 - Chrome，Safari，iOS Safari，甚至是Android浏览器都在玩。

这是一个非常简单的页面版本：http://thefloatcenter.com/test.html 以下是小提琴中的代码：http://jsfiddle.net/8b46L9av/

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<style>
#container,#header {
    width: 800px;
}
header#header #logo {
    border: 0;
    width: 800px;
    margin: 0 auto;
}

@media screen and (max-width: 700px) {
    #container, header#header {
    /*max-width: 700px;*/
    width: 100%;
    }
    header#header {
        background: -moz-linear-gradient(top, #484A5D, #000104);
        background: linear-gradient(#484A5D, #1B1D25, #000104);
        text-align: center;
    }
}

</style>
</head>
<body>
<div id="container">
    <header id="header">
    <a href="index.html">
        <picture id="logo" title="FLOAT - Floatation Center and Art Gallery, an Urban Art Spa" alt="FLOAT - Floatation Center and Art Gallery, an Urban Art Spa." >
            <source srcset=".images/banner2.jpg" media="(min-width: 700px)" >
            <source srcset=".images/banner_vert_trans_sml.png">
             <img src=".images/banner2.jpg"  >
        </picture>
    </a>
    </header> 
    <div id="maincontent">
        <div id="rtcontent">
            <a name="top"> </a>
            <h1><a id="services"></a>A title here</h1>
        </div><!-- end rtcontent -->
        <nav id="sidenav">
        </nav>
    </div>
    <div id="keywords">
        <p>cool stuff at the bottom</p>
    </div><!-- end keywords -->
    </div>  <!-- end container -->
</body>
</html>

<picture>元素不基于Firefox中的媒体切换

0 个答案: