媒体查询无响应
[英]Media query is not responsive
问题描述
我正在对一个类进行首次媒体查询，对我来说，我的代码看起来像我们给出的示例，但是当我使用开发人员工具在Chrome上对其进行测试时，它没有响应。 我只是试图使其在电话上查看时列表为垂直（阻止），而在更大的屏幕上查看时为水平（内联阻止）。 谁能帮我看看我做错了什么？
body { font-family: 'Ruslan Display'; } ul { background: #3399ff; padding: 20px; } #favorites li { background: #cce5ff; margin: 5px; list-style: none; display: block; } @media(min-width:375px; ) { #favorites li { display: inline; } }
<html lang="en"> <head> <link href="https://fonts.googleapis.com/css?family=Hanalei+Fill|Ruslan+Display" rel="stylesheet"> <meta charset="utf-8"> <meta name="description" content="My First Site for Web Fundamentals"> <title>My First Webpage</title> </head> <body> <p>This is my very first attempt at putting info up on a Webpage using aa media query for responsive design. <br></p> <p>Below is a list of my favorite people. It should change format based on whether or not you view it on an iPhone or a desktop.</p> <ul id="favorites"> <li>My husband, Brian</li> <li>My kids, Louis and Brady</li> <li>My parents, Terry and Steve</li> <li>My brother, Steven</li> <li>My best friend, Missy</li> </ul> </body>
2 个解决方案
解决方案1
0 2018-08-17 14:07:09
从媒体查询参数中删除分号； 这使您的查询无效。
@media(min-width:375px;)应该为@media(min-width:375px)
解决方案2
0 2018-08-29 21:33:31
当我尝试将您的html放入代码段时，有以红色突出显示的html错误。 您有break标签（ <br>带有正斜杠（ </br> ）被错误地选中（不必要使用正斜杠）。此外，结尾段落标签未被识别为匹配的（可能是堆栈片段的缺点，但是仍然可以在一段文本后关闭一个段落，而不是使用多个br标签。）HTML错误可能比CSS造成的问题更多。在线w3c验证程序是一个非常有用的工具，检查html错误..只是一个提示！
希望这可以帮助
媒体查询无响应
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.