gpt4 book ai didi

html - 媒体查询 : Three external CSS files

转载 作者:行者123 更新时间:2023-12-04 14:25:28 25 4
gpt4 key购买 nike

我正在创建一个网站,并且已经成功地使用外部 CSS 文件为移动和桌面样式创建了媒体查询。您可以在下面看到链接到外部工作表的 HTML; mobile.css 用于 <767px 的设备,desktop.css 用于 >768px 的设备。

<head>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" media="screen and (max-width: 767px)" href="css/mobile.css" />
<link rel="stylesheet" media="screen and (min-width: 768px)" href="css/desktop.css" />
</head>

网站设计完成后,我相信我可以让它更具响应性,我想将 desktop.css 更改为 tablet.css 并为超过 1000px 的设备创建一个新的 desktop.css。将以下外部 CSS 与媒体查询链接起来不起作用:

<head>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" media="screen and (max-width: 767px)" href="css/mobile.css" /> <!-- This works fine -->
<link rel="stylesheet" media="screen and (min-width: 768px)" href="css/tablet.css" /> <!-- This works fine -->
<link rel="stylesheet" media="screen and (min-width: 1000px)" href="css/desktop.css" /> <!-- Doesn't work -->
</head>

上面的代码生成的 mobile.css 和 tablet.css 都可以正常工作,但是当它超过 1000px 时它只会保留 tablet.css 而不是应用 desktop.css。

我的问题是我会为超过 1000 像素的设备添加第三个 CSS 文件吗?

任何帮助将不胜感激。

谢谢,

菲尔波特

最佳答案

不知 Prop 体方法,但是这个怎么样:

 <link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 999px)" href="css/tablet.css" />

 <link rel="stylesheet" media="screen and (min-width: 768px,max-width: 999px)" href="css/tablet.css" />

关于html - 媒体查询 : Three external CSS files,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46025389/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com