Question

好吧，在一个简单的html页面中，我无法运行媒体查询。我正在研究这些差距，因此我认为我犯了一些愚蠢的错误，我无法弄明白。

HTML

<div class="resume">
    <section>
        <h2>Info</h2>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a dignissim ipsum. Aliquam venenatis sapien semper, rhoncus nulla nec, feugiat ligula. </p>
            <div class="spacer"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a dignissim ipsum. Aliquam venenatis sapien semper, rhoncus nulla nec, feugiat ligula. </p>
        </div>
    </section>
</div>

CSS

div.resume {width:50%;}
div.content {padding:10px 10px 25px;}
div.content p {text-align:justify; line-height:1.2em; font-size:.9em;}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {div.resume{width:100%}  }

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { div.resume{width:100%}  }

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { div.resume{width:100%}  }

这只是我页面上的一些示例代码，但似乎无法正常工作。我尝试在这里和互联网上寻找类似的问题，但看起来我已经有了这样的地方，我的页面有正确的元标记，如下所示，我正在使用HTML5 doctype

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!DOCTYPE html>

媒体查询没有开始。任何帮助都将不胜感激。

Answer 1

你不需要在课前使用标签“div”，也许你正在调整浏览器的大小以用于测试目的而这不起作用，如果你想要有更动态的效果，你应该使用min-width和max-width代替min-device-width和max-devide-width，请注意“设备”字不起作用，因为“device”获取屏幕的最小宽度而不是浏览器

.resume {width:50%;}
.content {padding:10px 10px 25px;}
.content p {text-align:justify; line-height:1.2em; font-size:.9em;}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {.resume{width:100%}  }

/* iPads (landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { .resume{width:100%}  }

/* iPads (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) { .resume{width:100%}  }

媒体查询不起作用 - 一个简单的演示页面

1 个答案: