css - 没有 javascript 的响应式网页设计,适用于 IE <=8。是否可以?

标签 css internet-explorer media-queries javascript

我一直在努力建立自己的网站;我正在阅读有关 RWD(响应式网页设计)的文章。我在使用 IE 时遇到问题。我可以为 IE <= 8 使用默认样式显示,但我看到 [1]: http://www.etondigital.com站点 您可以访问该站点,并且在禁用 javascript 的 IE 7 中仍然可以响应地运行。我有点难以想象这是怎么可能的。它从三列变为一列。如果您了解网站功能,请告诉我如何实现。谢谢

/*****我已经添加了我的代码,并且关于我附加的链接,我如何在没有 javascript 的情况下在 Ie8 及以下版本中实现它来更改它从三排到一排,没有任何通知,如伊顿数字网站

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Second Theme</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
            <!--so html 5 tags work in ie browsers 8 and lower-->
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <style type="text/css">
        body{
   font:normal 100% Cambria, Georgia, serif;
   margin:10px;
}

.wrapper{
    margin: 0em auto;
    width: 93.75%;      /* 960/1024 */
    background:gray;
    padding:.625em;

}


.box{
width:29.847%;/*274/918*/
    float:left;
    margin-right:2em;
}

.clear{
    clear:both;
}

        </style>
    <body>
       <div class="warapper">
        <aside class="bottom_sidebar">
            <div class="box one">
                <h1>One</h1>
                <p>is simply dummy text of the printing and typesetting 
                    industry. Lorem Ipsum has been the industry's standard 
                    dummy text  ever since the 1500s, when an unknown printer
                     took a galley of type and scrambled it to make a</p>

            </div>
            <div  class="box">
                <h1>Two</h1>
                <p>is simply dummy text of the printing and typesetting 
                    industry. Lorem Ipsum has been the industry's standard 
                    dummy text  ever since the 1500s, when an unknown printer
                     took a galley of type and scrambled it to make a</p>
            </div>
            <div  class="box">
                <h1>Three</h1>
                <p>is simply dummy text of the printing and typesetting 
                    industry. Lorem Ipsum has been the industry's standard 
                    dummy text  ever since the 1500s, when an unknown printer
                     took a galley of type and scrambled it to make a</p>
            </div> 
            <div class="clear"></div>
        </aside>
    </div>
    </body>
</html>

最佳答案

如果您对所有 block 级元素使用基于百分比的宽度,则无需使用 @media CSS at 规则即可使您的网站响应式。否则,您将需要使用 JavaScript 才能让网站响应 IE 中的媒体查询。

关于css - 没有 javascript 的响应式网页设计,适用于 IE <=8。是否可以?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14824812/

相关文章:

html - IE8 中的简单 float DIV 布局不起作用

html - 元素不遵循媒体查询高度

css - 简单的 CSS 图像并排

css - react, css) 用于淡入和淡出的过渡 css,当使用 className 更改背景图像时

javascript - 如何为输入元素添加原型(prototype)?

internet-explorer - iframe 表单不在 IE 中提交但在 Firefox 中工作

javascript - 设备方向元数据

javascript - matchMedia removeListener 不起作用?

jquery - 我在哪里合并或添加标题上的下拉菜单脚本。 fiddle

c++ - Internet Explorer 内容插件中的可编写脚本的对象