1

我目前正在寻求制作与 IE8 兼容的响应式网页。通过一些互联网帮助，我通过将我的移动 css 内容放在带有媒体查询和响应 js 的 css 文件中来接近解决问题。这种方法产生了两个问题。在移动网站上，媒体查询下的移动 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 filmed interviews and conversations.
                        We have studio lights, a three camera set-up and remote
                        monitoring. Additionally, our Infinity Wall creates a clean and
                        professional look that allows the film 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的高度和宽度在上述部分中到处都是，图片尺寸仍然不合时宜

4

1 回答 1

0

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

<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您加载的标签上方respond.js。根据文档：

在所有 CSS之后引用 respond.min.js 脚本（1kb min/gzipped）（它运行得越早，IE 用户看不到一闪而过的非媒体内容的机会就越大）

GolezTrol也提出了一个非常有效的观点。您还可以将媒体查询保存在外部 css 文件中media-queries.css，然后像这样链接到它：

<link rel="stylesheet" href="media-queries.css" />

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

希望这可以帮助。

于 2013-07-11T18:56:48.467 回答