html5 – 针对不同媒体查询的不同CSS文件

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

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

@media (min-device-pixel-ratio: 1.5) {
  specific-media-rules
}

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

解决方法

是.一个例子如下:你想根据屏幕宽度使用不同的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"/>

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

相关文章

HTML5不是新事物。自从最初发布(2008年1月)以来,我们一直在使用它的一些功能。后来,我再次仔细查看...
Pointer Events API 是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(...
CSS动画非常的有趣;这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果。其中代表...
clip-path介绍 clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象...
语法 必需。动画时长的百分比。 合法的值: 0-100% from(与 0% 相同) to(与 100% 相同) 定义和用法...
基本代码 html代码: 首先定义一些基本的样式和动画: background-size: auto 100%; 这段代码的意思是让...