gpt4 book ai didi

iPhone 的 CSS 媒体查询

转载 作者:行者123 更新时间:2023-11-28 11:17:01 25 4
gpt4 key购买 nike

我有一个网站将同时显示在桌面和 iPhone 上,使用媒体查询来提供不同的样式表,因此例如始终加载 reset.css,但如果在桌面上也加载 desktop.css,但如果在 iPhone 上(或者如果用户调整浏览器窗口大小)改为加载 iphone.css 但不再加载 desktop.css,并且根据用户是否移动了 iPhone 添加 orientation.css 文件。

例如

/*

Theme Name: mywebsite

*/

@import "reset.css";

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
@import "desktop.css";
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
@import "iphone.css";

@media all and (orientation:portrait)
{
@import "iphone-portrait.css";
}

@media all and (orientation:landscape)
{
@import "iphone-landscape.css";
}
}

这一切都必须在样式表中完成,因为我构建网站的方式,我只想在 HTML 中使用一个 css 文件。

谁能帮我把它修成我想要的样子。干杯。

最佳答案

@import 必须位于 CSS 中的所有其他内容之前。

如果您只想要 HTML 中的 1 个 CSS 文件,为什么不复制并粘贴所有这些导入并将它们粘贴到您尝试调用导入的位置,即。

// css for reset.css

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
// css for desktop
}
...

关于iPhone 的 CSS 媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5329110/

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