由于有很多方法可以将CSS3媒体查询实现到网站中,我想知道哪些是经验丰富的网页设计师推荐的.我能想到一对夫妇:

1.一体化样式表

默认样式适用于所有屏幕宽度,并且媒体查询仅适用于较低的屏幕宽度并覆盖默认值,所有这些都在一个文件中.例如:

HTML

<link rel="stylesheet" href="main.css">

的main.css

article
{
    width: 1000px;    
}

@media only screen and (max-width: 1000px)
{
    article
    {
        width: 700px;
    }

}

(请记住,这只是一个例子)

优点:

• 默认样式适用于旧版浏览器
• 只需要一个HTTP请求

缺点:

• 用很多代码弄乱了
• 有些浏览器必须下载不适用的代码

2.单独的样式表

有单独的样式表包含为每个屏幕宽度定制的完整代码.浏览器仅加载适用的浏览器.例如:

HTML

<link rel="stylesheet" href="large-screen.css" media="screen and (min-width: 1001px)"> /*Also older browsers*/
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1000px)">

大screen.css

article
{
    width: 1000px;
}

小screen.css

article
{
    width: 700px;
}

优点:

• 整洁有序
• 只需要一个HTTP请求
• 浏览器只加载他们需要的东西

缺点:

• (这就是为什么我对使用它犹豫不决:)当一个人做出适用于所有屏幕宽度的更改时,必须将更改复制并粘贴到所有样式表中的相应位置.

3.单独的样式表,一个全局样式表

与#1相同,但全局样式和媒体查询位于不同的样式表中.例如:

HTML

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" …

我正在寻找一种可靠的方法来使用javascript以em为单位获取窗口的宽度.我很惊讶地看到jQuery只返回像素测量结果.任何帮助表示赞赏.

所以想象我有以下标记

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

以下款式 (SASS)

@mixin max-width($width) {
    @media screen and (max-width: $width) {
        @content;
    }
}

.container {
    display: flex;

    @include max-width(992px) {
        number: 4; //Hypothetical property that is supposed to control number per row
    }

    @include max-width(640px) {
        number: 2; //Hypothetical property that is supposed to control number per row
    }
}
.item {
    background-color: tomato;
    padding: 20px;
    margin-right: …

由于某种原因,似乎响应JS不起作用.我在IE 8中使用媒体查询来更改各种大小的显示器的背景图像.在IE 8中没有背景,只有纯色.

代码如下所示:

<!--[if lt IE 9]>
 <script type="text/javascript" src="/js/html5-shiv.min.js"></script>
 <script type="text/javascript" src="/js/respond.min.js"></script>
<![endif]-->

Media Query看起来像这样:

@media (min-width:769px) and (max-width:1366px){
 html, body{
   background: url(/images/backgrounds/1366-bg.jpg)  no-repeat center top fixed #190303;
   background-size:100% auto;
 }
}

有没有理由上面的代码在IE 8中不起作用？我应该尝试使用另一个JS来使IE 8媒体查询工作吗？

注意:似乎html5-shiv确实有效.我正在测试一个实时Web服务器.

(这可能已经回答了 - 虽然找不到答案)

传统的@media查询覆盖倾向于将同一括号组下的一个大小/介质的所有覆盖分组.

例如

.profile-pic {
    width:600px;
}
.biography {
    font-size: 2em;
}

@media screen and (max-width: 320px) {
    .profile-pic {
        width: 100px;
        float: none;
    }
    .biography {
        font-size: 1.5em;
    }
}

在Sass中,有一种非常好的方法可以在嵌套声明中编写@media查询覆盖,如下所示:

.profile-pic {
width:600px;
  @media screen and (max-width: 320px) {
    width: 100px;
    float: none;
  }
}

.biography {
    font-size: 2em;
  @media screen and (max-width: 320px) {
    font-size: 1.5em;
  }
}

现在,在编译时,sass不会将@media查询块组合在一起,因此输出最终会是这样的:

.profile-pic {
    width:600px;
}
@media screen and (max-width: 320px) {
  .profile-pic {
    width: 100px;
    float: none; …

@media only screen and (max-device-width : 640px) {
/* Styles */
}

@media only screen and (max-device-width: 768px) {
/* Styles */
}

这就是我到目前为止所拥有的.我正在研究的移动网站的PSD模型是640px宽.另一个是该网站的平板电脑版本,为768px.我只能使用max-width在我的网络浏览器中测试网站,但是现在是时候让这个网站在设备上工作了,它仍然在渲染常规的全尺寸网页.以上两个问题是我最好的猜测.我哪里错了？

我试图让这个工作,但不知何故它不适用于移动.当我使用chrome工具覆盖屏幕大小时,它工作正常.我不确定我做错了什么.请帮忙

@media screen and (min-device-width : 320px) and (max-device-width : 480px) {
            .container .backgroundImage { display: none; }
}

在浏览器中查看时有背景图像.si想要在移动设备上观看时删除该图片,但它不能以某种方式工作..请帮忙

=============

测试iPhone 3G,4,5,Android Galaxy Nexus

我是使用CSS3媒体查询的响应式设计的新手.我清楚地了解我们如何使用这些媒体查询来定位不同的设备,但我感到困惑的地方是BROWSER ZOOMING !!

对于Eg:这是我正常的身体css规则

#body {
    margin: 0 auto;
    width: 70%;
    clear: both;
}

当我想更改此css规则以定位宽度落在150px和600px范围内的设备时,我添加此特定媒体查询.

@media only screen and (min-width:150px) and (max-width:600px){

#body {
    margin: 0 auto;
    width: 90%;
    clear: both;
}


}

问题:我正在使用谷歌浏览器,当我放大到大约200%时,这个特定的媒体查询开始发挥作用.

我如何知道要为不同的缩放级别编写哪些媒体查询,或者另外说明浏览器缩放级别和像素宽度之间的关系.

我还没有在这里看到这个问题,但我想知道是否有人知道是否有可能基于容器或父元素基于它的宽度进行媒体查询.用户的情况是,当您从左侧弹出一个菜单并减小主窗口容器的大小时.这是一个示例网站,您可以在其中看到菜单弹出打开但页面上的内容无法根据其新宽度进行更改

http://tympanus.net/Tutorials/FullscreenBookBlock/

我对媒体查询的世界很陌生,而且很明显,我忽略了宽度和设备宽度之间的差异 - 除了明显的定位能力之外.

我想将常规计算机和具有相同断点的设备作为目标,因此我只是将所有最小和最大宽度查询复制到min-device和max-device width查询.无论出于何种原因,当我添加-device对应物时,我的CSS被常规计算机解释得非常不同,而且我不确定我做错了什么.

你可以在这里看到效果(这应该是它应该是什么样的)

在这里(在我的查询中添加-device-width之后,我的CSS在最小的宽度上被搞砸了 - 即使浏览器宽度小于被调用的内容,也可以看到更大的分辨率).

这是我的CSS链接 - 我的语法有问题吗？:

<link rel="stylesheet" media="only screen and (max-width: 674px), only screen and (max-device-width: 674px)" href="300.css">
<link rel="stylesheet" media="only screen and (min-width: 675px) and (max-width: 914px), only screen and (min-device-width: 675px) and (max-device-width: 914px)" href="650.css">
<link rel="stylesheet" media="only screen and (min-width: 915px) and (max-width: 1019px), only screen and (min-device-width: 915px) and (max-device-width: 1019px)" href="915.css">


<link rel="stylesheet" media="only screen and (min-width: 1020px), only screen and (min-device-width: 1020px)" href="1020.css">
<link rel="stylesheet" …