我的LG Optimus One手机的分辨率为320x480.然而,只有最大宽度为800px的媒体查询(并且每个人都知道320 = 800!)在该移动设备上被触发.
任何解释？
我想知道我是否可以在特定视口中隐藏我的媒体查询中的" 管道 "(例如:|)字符？
我很想知道,因为我有一个菜单,将它们用作分隔符,但在移动视口中呈现的效果非常差,所以如果我能以某种方式隐藏它们,那就太爱了.
我想我可能不得不在移动视口中使用我定义的CSS的一些jQuery？
有什么建议？
更新10:38 AM:感谢你们的回应!我已经尝试过将类添加到span标签,现在我的管道没有显示,下面是footer.php中的标记,我有相应的隐藏在媒体Q中.
<li class="f"><a href="#" class="scrolltime">EXPLORE</a> <span class="pipe"> | </span></li>
<li class="f"><a href="#" class="scrolltime"> FOR</a><span class="pipe"> | </span></li>
<li class="f"><a href="#" class="scrolltime">ENHANCED</a><span class="pipe"> | </span> </li>
<li class="f"><a href="/iframe/buybutton.html" class="fancybox-iframe" style="color:#C6C699;">Iframe</a></li>
</ul>
CSS3:
/* Smartphones (Landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
#topvidarea {
margin-left: 24%;
margin-right: 20%;
margin-top: -265px;
max-width: 400px;
}
#topbgimg { display: none; }
#topbtn, #topbtn2, #topbtn3 {
border: 0 solid …因此,当我在iOS设备上从纵向模式切换到横向模式时,我的响应式网站出现了一个奇怪的问题.您可以在这里查看实时网站:http://www.aptify.com
如果您以纵向模式查看网站,请旋转放大的iOS设备.
我目前有以下元数据:
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
我发现了一个与此类似的问题:媒体查询 - iPhone上的风景模式太过分了,但问题从来没有给出正确的答案.唯一的答案确实提到了使用与我上面的标签类似的东西,但它只是:<meta name="viewport" content="width=device-width" />没有initial-scale=1.0- 这有什么不同？
我还要注意,这不会发生在Android设备上,只有iOS设备上.
以前有人修过这个问题吗？
谢谢你的帮助!
好吧,我不确定我mobile first和non mobile first响应式布局之间有什么区别？
这就是我所知道的,也许有些事情是不对的:
我看到bootstrap设置和foundation设置之间存在差异,这种差异是否重要？
<!-- Bootstrap -->
<!-- I've read it's not mobile first -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Foundation -->
<!-- I've read it's mobile first -->
<meta name="viewport" content="width=device-width">
最后,我所知道的,还有更多值得了解的东西吗？
哪里可以找到一个好的指南？
在index.html中添加了这一行:
<link href="css/style.css" media="all "rel="stylesheet" type="text/css" />
这是我的媒体查询CSS:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#mapArea .white span {
width: 100px;
}
}
但是当我在浏览器中检查它时,不要工作.我的问题是什么？我该如何解决？
(测试了所有现代浏览器)
我有这些媒体查询为iPhone 4和iPhone 5应用不同的样式
/* iPhone 4 (landscape) */
@media only screen and (min-width:320px) and (max-width:480px) and (orientation:landscape) {
.background img {
height: 5px;
}
}
/* iPhone 4 (portrait) */
@media only screen and (min-width:320px) and (max-width:480px) and (orientation:portrait) {
.background img {
height: 10px;
}
}
/* iPhone 5 (landscape) */
@media only screen and (min-width:320px) and (max-width:568px) and (orientation:landscape) {
.background img {
height: 245px;
}
.logo img {
height: 205px;
width: 205px;
}
}
/* iPhone 5 …我正在使用Foundation 5,除了IE8以外,所有浏览器都能正常工作.我也尝试使用polyfill,但IE8上仍存在css问题.任何其他解决方案.
我有一种情况,在大屏幕(1400px +)我们有一个大的内容区域,宽边内容(3列).随着屏幕变小,旁边列的数量变少,但主要内容也变小.因为主要内容变得更小,所以我有媒体查询来设置这个内容的样式,并且主要内容中的内容相互低于一致.
这里的问题是,当浏览器分辨率低于960px时,容器全部占用1行的宽度,因此主容器再次变大,我希望相同的规则适用于1400px +分辨率(因为它看起来更好).然后低于768px我想回到布局,一切都在1行.
我已经有了这个样式来分离样式:@media only screen and (min-width: 960px) and (max-width: 1400px){
但现在我也希望在768px以下使用这些相同的样式.这可能不重复我的代码吗？
我以前用html和内联css构建了电子邮件.我最近决定添加媒体查询,以使它们更适合移动设备.但是我想知道内联样式(css)是否优先于媒体查询.
例如:如果我对iPhone进行媒体查询,电子邮件会显示来自相应媒体查询或内联样式的样式吗？
谢谢!!
用于定位Apple 2019设备的正确CSS媒体查询是什么？
iPhone 11，iPhone 11 Pro和iPhone 11 Pro Max。