HTML链接：

<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">

CSS：

@media all and (max-width: 1024px) {
    ......
}

我已阅读文档,我理解两种方法之间的明显区别.但是,以下是2个问题,如果您能澄清,我有疑问：

1)浏览器是否以不同于CSS媒体查询的方式处理HTML媒体链接？我的意思是,我知道如果在css中添加CSS媒体查询,所有css文件都会被下载到所有设备,并且当浏览器解释编译的css时,只有相应的媒体查询才会生效.但是,如果媒体链接是以HTML格式添加的,那么它是否意味着只有当指定宽度匹配的设备时,浏览器才会下载foo.css？与Css媒体查询相比,浏览器处理HTML媒体链接的方式是否有所不同,或者它们是否完全相同,只是添加到网页的方式不同？

2)假设foo.css还有1024px以外的较小宽度的媒体查询,如下所示：

body {
   padding: 10px;
}     
@media all and (max-width: 900px) {
    body {
       padding: 5px;
    }     
}    
@media all and (max-width: 800px) {
    body {
       padding: 0px;
    }     
}

如果使用HTML链接添加上述文件,如下所示：

<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">

这会成为浏览器看待它的嵌套媒体查询吗？我不明白的是,如果使用html链接添加上述内容,我不知道浏览器是否真的会像这样看到它变得无效：

@media all and (max-width: 1024px) {
    body {
       padding: 10px;
    } 

    @media all and (max-width: 900px) {
        body {
           padding: 5px;
        } 

    }

    @media all and (max-width: 800px) {
        body {
           padding: 0px;
        } 

    }

}

所以我的问题是,如果我在使用HTML媒体链接添加的css文件中有进一步的媒体查询,那有效吗？

编辑：
我在桌面上使用chrome查看了开发人员工具,我可以看到即使从桌面设备浏览也会下载平板电脑文件：

1)因此对于问题1,是否可以安全地假设所有浏览器都包含较旧的浏览器并且移动浏览器执行相同的操作,即使它们被放置在HTML链接中也会下载所有文件？

2)对于问题2,我可以看到当浏览器屏幕调整为平板电脑宽度时,chrome确实使用了平板电脑css内的媒体查询.在html中链接为1024px的css文件被视为media =“(max-width：1024px)”.但那么,这不意味着平板电脑的css文件中的媒体查询实际上是嵌套的媒体查询吗？虽然它有效但不是逻辑错误吗？是否有一些更严格的浏览器不认为这是有效的？

User agents should re-evaluate media queries in response to changes in the user environment,for example if the device is tiled from landscape to portrait orientation,and change the behavior of any constructs dependent on those media queries accordingly.

这意味着您不能只评估每个媒体查询,然后下载相应的样式表,因为环境可能会发生变化,导致重新评估这些媒体查询.我认为它可以进行优化,但现在all browsers下载所有样式表,无论媒体查询.

对于第二个问题,规范没有提到HTML和CSS声明的媒体查询之间的任何区别.自CSS3起允许嵌套媒体查询,并将@media-rules放在已标记为media =“…”的样式表中,应与纯CSS嵌套媒体查询相同.

我通过this博文阅读了如何用LESS“做”媒体查询,但它指出了这导致所有媒体查询被分离并分散在整个CSS中的事实.这并没有真正打扰我(我可以不关心结果,更多关心它的工作).困扰我的是一条评论,该评论在从iOS设备查看时讨论了问题,而评论者发现,一旦整合了媒体查询,问题就解决了.

有没有人找到使用LESS媒体查询的好解决方案？

我开始这种工作的方式就像……

//Have an overall structure...
.overall(){
    //Have ALL your CSS that would be modified by media queries and heavily use
    //variables that are set inside of each media queries.
}
@media only screen and (min-width: 1024px){
    //Define variables for this media query (widths/etc)
    .overall
}

我知道这可能存在一些问题,但目前的设置似乎并没有那么有用.

所以我想我的问题是,是否有任何好的解决方案/黑客允许分组媒体查询？

(只是因为我使用无点作为解析我的.less文件的引擎)

然而,我认为有一件事是将所有媒体查询变量定义为“接近”彼此很好(你的解决方案会在每次媒体查询调用下都有它们).所以我提出以下作为替代解决方案.它也有缺点,一个可能在前面编码更多.

少量代码

//define our break points as variables
@mediaBreak1: 800px;
@mediaBreak2: 1024px;
@mediaBreak3: 1280px;

//this mixin builds the entire media query based on the break number
.buildMediaQuery(@min) {
    @media only screen and (min-width: @min) { 

        //define a variable output mixin for a class included in the query
        .myClass1(@color) {
            .myClass1 {
               color: @color;
            }
        }

        //define a builder guarded mixin for each break point of the query
        //in these is where we change the variable for the media break (here,color)
        .buildMyClass1() when (@min = @mediaBreak1) {
           .myClass1(red);
        }
        .buildMyClass1() when (@min = @mediaBreak2) {
           .myClass1(green);
        }
        .buildMyClass1() when (@min = @mediaBreak3) {
           .myClass1(blue);
        }

        //call the builder mixin
        .buildMyClass1();

        //define a variable output mixin for a nested selector included in the query
        .mySelector1(@fontSize) {
           section {
              width: (@min - 40);
              margin: 0 auto;
              a {
                font-size: @fontSize;
              }
           } 
        }

        //Again,define a builder guarded mixin for each break point of the query
        //in these is where we change the variable for the media break (here,font-size)
        .buildMySelector1() when (@min = @mediaBreak1) {
           .mySelector1(10px);
        }
        .buildMySelector1() when (@min = @mediaBreak2) {
           .mySelector1(12px);
        }
        .buildMySelector1() when (@min = @mediaBreak3) {
           .mySelector1(14px);
        }

        //call the builder mixin
        .buildMySelector1();

        //ect.,ect.,etc. for as many parts needed in the media queries.
    }
}

//call our code to build the queries
.buildMediaQuery(@mediaBreak1);
.buildMediaQuery(@mediaBreak2);
.buildMediaQuery(@mediaBreak3);

CSS输出

@media only screen and (min-width: 800px) {
  .myClass1 {
    color: #ff0000;
  }
  section {
    width: 760px;
    margin: 0 auto;
  }
  section a {
    font-size: 10px;
  }
}
@media only screen and (min-width: 1024px) {
  .myClass1 {
    color: #008000;
  }
  section {
    width: 984px;
    margin: 0 auto;
  }
  section a {
    font-size: 12px;
  }
}
@media only screen and (min-width: 1280px) {
  .myClass1 {
    color: #0000ff;
  }
  section {
    width: 1240px;
    margin: 0 auto;
  }
  section a {
    font-size: 14px;
  }
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

    /* Code for both portrait and landscape */

    @media (orientation:portrait) {

        /* Code for just portrait */

    }

    @media (orientation:landscape) {

        /* Code for just landscape */

    }

}

您将不得不完全展开和重复顶级媒体查询内部规则，以便它可以在浏览器之间工作(我想像，SCSS处理器会产生类似的东西)：

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) {
    /* Code for both portrait and landscape */
}

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: portrait) {

    /* Code for just portrait */

}

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: landscape) {

    /* Code for just landscape */

}

基本上我有4种尺寸(S,M,L,XL)的CSS,但随后出现了像“HTC One”这样的手机,它具有全高清(1920×1080)和4.7英寸……我怎么算这个呢？就像一个覆盖大多数帧的框架.我要接近这个吗？我如何覆盖大多数设备？

干杯,
ķ

<link rel="stylesheet" href="./css/base.css" type="text/css" media="all">
<link rel="stylesheet" href="./css/720_grid.css" type="text/css" media="screen and (min-width: 720px)">
<link rel="stylesheet" href="./css/986_grid.css" type="text/css" media="screen and (min-width: 986px)">
<link rel="stylesheet" href="./css/1236_grid.css" media="screen and (min-width: 1236px)" >

所以我基本上有三个CSS文件,根据屏幕的宽度,每个都自动加载.最后一个是1236或更高的任何东西.

这是你在找什么……或者我错过了你的要求？