好像最近我看到更多的人开始在他们的样式表中使用media="all"vs.media="screen"

我的问题是,当我应该使用media="all"过media="screen",反之亦然？

注意:如果有所不同,我使用的是HTML5 Doctype.

根据Apple的网站:

iPhone 6的分辨率为1334×750像素,分辨率为326 ppi,对比度为1400:1(典型值)

iPhone 6+的分辨率为1920×1080像素,分辨率为401 ppi,对比度为1300:1(典型值)

但是,CSS媒体查询响应断点的内容是什么？(肖像和风景)

我不完全了解如何使用各种响应式仿真器测试视网膜屏幕尺寸.任何帮助将非常感激.

有人知道如何使用媒体查询定位三星Galaxy S3吗？

目前我使用:

iPad的

<link rel="stylesheet" media="all and (device-width: 768px)"                                                href="css/device-768.css"/>

其他平板设备

<link rel="stylesheet" media="all and (max-device-width: 767px) and (min-device-width: 641px)" href="css/device-max767.css"/>

电话(S3没有使用这个 - 不知道为什么)

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1)"    href="css/phones.css"/>

我也测试过

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"    href="css/phones.css"/>

但它没有工作......

我正在尝试使我的响应式CSS样式仅适用于平板电脑和智能手机.基本上我有桌面风格,移动风格:肖像和移动风格:风景.我不希望移动样式干扰桌面演示.我玩过无数媒体查询,但结果是移动样式显示在桌面上,或者移动样式仅在移动设备上显示,但只有一组规则(无响应).有没有办法让两者完全分开？

我现在的代码是这样的:

/* regular desktop styles */

@media only screen 
and (max-device-width: 600px)
 { ... }

/* mobile only styles when the device is 0-600px in maximum width */

@media only screen 
and (max-device-width: 1000px)
{ ... }

/* mobile only styles when the device is up to 1000px in maximum width */

我试图根据浏览器的最小高度和最小宽度更改页面上的CSS,所以我使用这个:

@media (min-height: 500px), (min-width: 580px) {
    /* CSS stuff */
}

但由于某种原因,这不起作用.我可以同时检查最小高度和最大宽度(反之亦然)或最大高度和最大宽度,但检查两个最小值似乎不起作用.

我应该更多地指定:我希望浏览器在最小高度或最小宽度变为真时起作用.只有两个条件都为真,才能使用和运算符.

难道我做错了什么？

我有一个响应的网页.它利用媒体查询.

但是在iframe中加载的同一页面无效.

例如,考虑到我的网页,当屏幕宽度小于640px时,我将背景颜色设置为红色.

@media only screen and (max-device-width : 640px) {

    .header-text {
        background-color: red;
    }
}

因此,当我在新选项卡中加载该窗口并使浏览器宽度小于640px时,背景颜色变为红色.

但是在320*480维度的iframe中加载时,同一窗口没有背景颜色为红色.

如何使媒体查询在iframe中工作？

按F12我可以立即更改Chrome中元素的CSS.但是,我不能输入@media屏幕和(max-width)类似于这里:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

当我按下输入它只是消失.如何动态添加和删除媒体查询？

简单的术语aspect-ratio和之间的区别是什么device-aspect-ratio？

有人能告诉我在响应式设计中检测媒体查询的最佳宽度范围是什么？

我想在4个媒体查询中涵盖所有桌面/笔记本电脑显示器(带有一个方向),但我不知道是否可能例如:小型显示器,中型显示器,大型和超大型显示器.

例如,在此代码中

/* Desktops and laptops ----------- */
 @media only screen and (min-width : 1224px) {}

/* Large screens ----------- */
 @media only screen and (min-width : 1824px) {}

我认为我们仍然需要将台式机和笔记本电脑媒体设置为三个小媒体(如13"到14台笔记本电脑),中等(如15到17)和大(超过22#).我知道浏览器分辨率不同比屏幕分辨率,但我们说我们有所有格式的全屏模式的浏览器.

谢谢你的帮助

我很困惑,仍然不确定如何用恰当的话来解释这一点.到目前为止,我已经使用Breakpoint设置了我的媒体查询.使用的断点变量看起来像例如:

$menustatictofixed: min-width 900px;

$ breakpoint-to-ems设置为true.我根据以下jQuery代码段的像素值布置了包含所有Breakpoint变量的页面:

$('body').append('<div style="position: fixed; bottom: 0; right: 0; display: inline-block; font-weight: bold; padding: 5px 7px; border-radius: 5px 0 0 0; background: green; color: white; z-index: 9999;">Viewport width <span id="width"></span> px</div>');
var viewportWidth = $(window).width()
$('#width').text(viewportWidth);
$(window).resize(function() {
  var viewportWidth = $(window).width();
    $('#width').text(viewportWidth);
});

一切看起来都很干净.但是在过去的一两天里,我遇到了为模式设置最后断点并让事情表现出可预测性的问题.在某种程度上,首先看起来干净整洁的东西,我现在在逻辑上非常怀疑,实际上是不合适的,不知何故是一团糟.Cuz,如果你看一下下面的截图,窗口的宽度(在Chrome中)与使用window.width的jQuery代码段的宽度不同.如果我用window.innerWidth替换window.width来最终排除滚动条也没有区别.获得正确结果的唯一方法是在等式中添加15个像素:

var viewportWidth = $(window).width() + 15;

整个方程中唯一的问题是window.width是错误的函数选择,最好是使用例如document.documentElement.clientWidth或其他东西或......？对于15个像素代表什么,以一点点hacky方式修复了上面的问题？最好的问候拉尔夫