Question

我目前正在寻求制作与IE8兼容的响应式网页。通过一些互联网帮助我接近解决问题的方法是将我的移动css内容放在带有媒体查询的css文件中并回复js。这种方法产生了两个问题。在移动网站上，媒体查询下的移动css未正确加载。移动内容的某些更改会显示，而其他更改则不会。在IE8网站上，它看起来很好，除了顶部视频没有显示，并且另一个的宽度和图片大小搞砸了。有什么建议？谢谢！下面是一些相关代码的片段

<head style="overflow-x: hidden">
    <script src="//cdn.optimizely.com/js/272026200.js"></script>
    <meta name="viewport" content="width=device-width">
    <title>Dupont Studios</title>
    <link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="waypoints.js"></script>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="screen" href="style.css" />

    <script type="text/javascript" src="respond.js"></script>


@media screen and (max-width: 400px){
    body{
        font-family: 'Helvetica Neue', 'Helvetica Neue Light', sans-serif;
        margin:0;
        max-width:400px;


    }

部分与搞砸了ie8图片

 <div class = 'picture-container' id = 'pc1'>
            <div class = 'large-picture' id = 'lp1'>
                <figure style = 'float:left;width:45%;'>
                    <img src = 'make-up_artist_dupontstudios.png' width = '100%' height = '100%' class = 'no-mobile'>
                    <figcaption class = 'red-cap'>Our Set-Up</figcaption>
                </figure>
                <div class = 'picture-content'>
                    <div class = 'picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
                    <div class = 'picture-text'>We built a boutique full service production studio that allows for
                        one, two and three person ﬁlmed interviews and conversations.
                        We have studio lights, a three camera set-up and remote
                        monitoring. Additionally, our Inﬁnity Wall creates a clean and
                        professional look that allows the ﬁlm to be about the message.</div>
                    <div class = 'small-picture'>
                        <img src = 'hair_and_makeup_dupontstudios.png' width = '175' height = '100'>
                    </div>
                    <div class = 'small-picture'>
                        <img src = 'infinity_wall_dupontstudios.png' width = '175' height = '100'>
                    </div>
                </div>
            </div>
        </div>

更新：我在每个样式表链接后添加了。移动内容现在正在运行，但IE8仍然相当不错。在前面提到的部分中，div的高度和宽度都到处都是，而且图片大小仍然没有出现。

Answer 1

将媒体查询放在样式标记中：

<style type="text/css">
    @media screen and (max-width: 400px){
        body{
            font-family: 'Helvetica Neue', 'Helvetica Neue Light', sans-serif;
            margin:0;
            max-width:400px;
        }
    }
</style>

您还错过了媒体查询的结束大括号。我也补充说。

另外，将其移至加载script的{{1}}标记上方。根据文档：

引用respond.min.js脚本（1kb min / gzipped）所有CSS之后（运行的越早，IE用户就越有可能看不到非媒体的闪光' d内容）

GolezTrol 也提出了一个非常有效的观点。您还可以将媒体查询保存在外部css文件中，如respond.js，然后链接到它，如下所示：

media-queries.css

这可以使您的html文件更清晰，并使它们更易于维护。

希望这有帮助。

媒体查询未正确加载

1 个答案: