媒体查询未针对小尺寸运行
Posted
技术标签:
【中文标题】媒体查询未针对小尺寸运行【英文标题】：Media query not running for small sizes 【发布时间】：2017-03-19 09:18:14 【问题描述】：在我的面板中，当页面大小为 Fiddle
@@media all and (min-width : 768px)
.text-left
text-align: center;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p><a href="#">My Profile</a></p>
<img src="bird.jpg" class="img-circle" >
</div>
<div class="well">
<p><a href="#">Interests</a></p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<p><strong>Ey!</strong></p>
People are looking at your profile. Find out who.
</div>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>John</p>
<img src="bird.jpg" class="img-circle" >
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Bo</p>
<img src="bandmember.jpg" class="img-circle" >
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Jane</p>
<img src="bandmember.jpg" class="img-circle" >
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Anja</p>
<img src="bird.jpg" class="img-circle" >
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" >
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>更新！ - 我将媒体查询设置为
@@media only screen and (max-width : 767px)
.text-left
text-align: center;
当我打开 Chrome 时，它工作正常。但是，如果我在默认窗口大小约为 900 像素时打开 IE 11，则文本居中（不好）。仅供参考 - 如果我稍微调整窗口大小，文本会重新对齐到左侧！这是一个奇怪的 IE 错误吗？？
【问题讨论】：
你能查一下@@media吗，因为它会是@media。
检查此问题后，您需要将@@media 的拼写错误解决为@media。
检查这个链接它运行良好 IE 11 copen_link
请查看此链接：-css-tricks.com/snippets/css/media-queries-for-standard-devices
【参考方案1】：
@media all and (max-width : 768px)
.text-left
text-align: center;
【讨论】：
【参考方案2】：不是@@media，而是@media。
@media all and (min-width: 768px)
.text-left
text-align: center;
【讨论】：
我使用的是 ASP.Net MVC，它是 @@media，而不是 @media 很高兴您在问题中提到了这一点并否决了我的回答。看看你自己的小提琴，使用@media。它按预期工作。 jsfiddle.net/fht0wtwp/1
我想我更关心的是 IE 和 Chrome，尽管我在原始帖子中没有提到它。它在 Chrome 中运行良好，但如果我打开 IE 并以 850px 的位置开始页面，则文本居中（不好），如果我稍微调整窗口大小，则会适当地重新设置文本（左对齐）。为什么 thios 只在 IE 而不是 Chrome？【参考方案3】：
对于小型设备，您不能使用min-width。
指定所有 Min 和 Max 的最佳方式。
@media all and (max-width: ***px) and (min-width: ***px)
更多示例：
@media only screen and (min-width: 768px)
/* Tablets and Desktop */
@media only screen and (max-width: 767px)
/* Phones */
@media only screen and (max-width: 767px) and (orientation: portrait)
/* Portrait Phones */
您是否担心所有和仅屏幕？
请对这篇文章链接做一个场景： link_1Link_2
您还可以阅读一些关于此的 *** Q：
Question
更新IE -11问题解答
关于 *** 的同样问题 Link_1 Link_2
解决方案：
@media all and (max-width: ***px)
//Media Query CSS
直播链接： link_1 link_2
【讨论】：
好的，所以我只使用@media 屏幕和（最大宽度：767px），它在 Chrome 中运行良好，但是当我在 IE 11 中打开它时，即使屏幕更大，文本也会居中767 像素。为什么 IE 表现得很时髦，但 Chrome 没问题？ 如果我稍微调整一下屏幕大小，文本会变回左对齐！这是一个奇怪的 IE 错误吗？ 给我一点时间，让我了解您的问题的更多信息【参考方案4】：您是否设置了视口元标记？
<meta name="viewport" content="width=device-width, initial-scale=1">
如果未设置此标签，媒体查询将无法正常工作。
【讨论】：
解决了我的问题:)以上是关于媒体查询未针对小尺寸运行的主要内容，如果未能解决你的问题，请参考以下文章