gpt4 book ai didi

html - 如何将网站链接到多个媒体查询?

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

我想根据不同的媒体查询为我的 HTML 设置不同的样式。例如,我希望我的 HTML 在宽度为 1024px 或更小的浏览器上以某种方式显示,而在横向浏览器上以另一种方式显示(例如手机翻转时) ).这是我尝试做的;

@media (max-width: 1024px) {
h1{
margin-top: 10px;
}
}

@media (orientation: landscape) {
h1{
margin-top: 20px;
}
}
<html>
<body>
<h1>Hello world</h1>
</body>
</html>

但不幸的是,它没有用。问题是当我在横向设备上加载网站时,代码没有改变。

注意:我的问题是不是媒体查询完全不起作用。但是,我无法使用两个以上 媒体查询。

谢谢。

最佳答案

作为开始,尝试使用它而不是你拥有的:

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

关于html - 如何将网站链接到多个媒体查询?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38514477/

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