不同的CSS文件用于不同的媒体查询

edA*_*a-y 7 html5 css3 media-queries

有没有办法让HTML文件根据媒体属性使用不同的样式表?我知道该link方法采用媒体类型,但我发现的所有引用仅指示媒体类型,而不是扩展查询.我也不确定如何确保只选择一个,以及哪一个.

基本上在我目前的CSS文件中,我有一个像这样的媒体部分(简化仅供参考):

@media (min-device-pixel-ratio: 1.5) {
  specific-media-rules
}
Run Code Online (Sandbox Code Playgroud)

我想要的是,不是让这个部分和其他媒体非常类似的部分是为两个不同的文件提供服务.

dsg*_*fin 16

是.一个例子如下:你想根据屏幕宽度使用不同的CSS文件(一个用于手机,一个用于小平板电脑),你可以这样做:

<link rel="stylesheet" media='screen and (min-width: 140px) and (max-width: 380px)' href="phone.css"/>
<link rel="stylesheet" media='screen and (min-width: 381px) and (max-width: 700px)' href="tablet.css"/>
Run Code Online (Sandbox Code Playgroud)

但请注意,您需要确保每个样式表的要求不会相同,就好像它们一样(如果上面的两个样式表都具有相同的最小宽度和最大宽度)两者都将被应用.

  • @ edA-qamort-ora-y,它不选择一个*或*另一个,它根据媒体查询是否恰好匹配来应用每个样式表.如果应用多个样式表,则级联按照惯例工作. (4认同)