标签: media-queries

我试图让这块CSS在我的ipad上工作,但它似乎忽略了媒体查询并使用默认的包装CSS代替.有没有办法阻止这种情况发生？

@media only screen and (max-width: 1024px) and (max-height: 768px) {
    #wrapper {
        position:absolute; 
        z-index:1;
        top:41px;
        width:150px;
        height:300px;
    }    
}

#wrapper {
    position:absolute; 
    z-index:1;
    top:41px; 
    bottom:0px; 
    left:0;
    width:100%;
    height:800px;
    overflow:auto;
}

我目前正在使用Wordpress网站并尝试编写手持设备和平板电脑的响应式外观,但媒体查询无效.

目前只在iPhone上尝试肖像,它不会采取.

任何帮助将不胜感激.

`/* Smartphones (portrait) ----------- */ @media only screen and (max-width : 400px) { h1#logo {margin-top:-6%; margin-left:10px;} .topnav.navRight {left:15%; margin-top: -1%;} #header .social-icons {margin-top:-3%; position:absolute; margin-left:17% !important;} #main_menu {margin-top:-10% !important;} }`

该网站位于luludew.com/wp

所以我使用Twitter Bootstrap 3来建立一个网站.我想知道是否有任何改变字体大小取决于网站显示的分辨率.我有一些显示为140像素的标题字体,在桌面模式下看起来很棒,但在手机上查看时却会出现问题.我对发展很新,所以所有的帮助都表示赞赏.谢谢.

这个问题类似于CSS媒体查询:max-width OR max-height,但由于我的代表不够高,我无法在回复中添加注释(问题),我想添加到原始问题.

就像其他主题中的海报一样,我有针对DIV的某些规范的媒体查询.

@media only screen and (min-width:460px){
.center{width:250px;}
}

@media only screen and (min-width:960px){
.center{width:350px;)
}

现在,当屏幕宽度为960px时,我希望中心DIV为250px宽,但只有400px高.如果我将第一个媒体查询设置为:

@media only screen and (min-width:460px), screen and (max-height:400px){
.center{width:250px;}
}

我的浏览器会使用哪个查询？最小高度是否会超过最小宽度？或者它会跳过最小高度并转到最小宽度查询(960px)？

我已经使用了Stack Overflow来找到答案,但是没有发布任何问题,所以如果这个问题不完整,请告诉我.

-edit-我进入了错误的状态(min-height而不是max-height)

/* iphone retina portrait, 4inch (iphone 5 and up) */
@media only screen and (-webkit-min-device-pixel-ratio : 2) and (device-aspect-ratio: 40/71) {
    body {
        background-color: red;   
    }
}

/* retina, iphone, portrait, 3.5inch (iphone 4) */
@media only screen and (-webkit-min-device-pixel-ratio : 2) and (device-aspect-ratio: 2/3) {
    body {
        background-color: yellow;   
    }
}

尝试但不起作用的任何想法，我必须完全区分iPhone 4，iPhone 4s和iPhone 5。

我正在尝试研究如何在我的最新项目中使用EM媒体查询.然而,经过一些测试后,我发现媒体查询有点偏差,我无法解决原因.它可能与父项字体大小而不是正文有关.我的身体已经准备好了14px,我的工作外观如下:

$break-small: 22.8571em; //320px
$break-smallish: 40em; //560px
$break-med: 54.8571em; //768px
$break-medish: 68.5714em; //960px
$break-desk: 73.1428em; //1024px

正文字体大小:

body{
    font-size: 14px;
    line-height: 1.5;
    min-height: 100%;
}

*(来自我的SCSS断点变量)根据我的理解,我做了:768/14(基本字体大小)= em的宽度

说我有一个div叫做标题,没有font-size这个div,只有这个孩子div.当然它还会使用身体font-size吗？

我的代码看起来像

<nav>
 <ul>
  <li>link 1 </li>
  <li>link 2 </li>
  <li>link 3 </li>
  <li>link 4 </li>
 </ul>
</nav>

我想知道是否有一种方法可以隐藏link #小设备上的文本(使用媒体查询)并用图标替换它(即当页面全屏时不会出现的图标).

有什么建议？

我想使用媒体查询控制我的徽标的大小.

width我的徽标原件是210px.

我希望它166px在屏幕width大于56.865em和小于此时相同时width,即移动网站.

我为此编写了以下代码:

@media only screen and (min-width: 56.875em){
  .site-branding img{
    max-width: 166px;
  }
}

@media only screen and (max-width: 56.875em){
  .site-branding img {
    max-width: 166px !important;
  }
}

只有第一个代码块正在运行.为什么不是第二次工作？(当屏幕宽度减小时,width徽标210px再次变为).

有没有你不能同时使用任何规则min和max媒体查询,以控制相同的元素？

任何人都可以告诉为什么<div>宽度没有调整到48%屏幕尺寸变化？是因为我用过position: relative;吗？

CSS:

.wrap {
  width: 24%;
  background: white;
  margin: 15px;
  padding: 10px;
  float: left;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

@media(max-width: 580px){
  width: 48%;
}

我有宽度为190像素的HTML div,它对于桌面是正常的,但对于移动它不是,有没有办法判断连接是否来自桌面取这个值,否则取这个值？

这是我的代码:

document.querySelector('.article').style.width ='190px';