gpt4 book ai didi

css - 如何为桌面和移动设备制作对移动设备友好的 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 03:46:17 24 4
gpt4 key购买 nike

这可能是我的无知,但我认为欢迎任何新手问题,只要有机会辨别是非。

为了响应式和移动友好的设计,我正在使用

@media only screen and (max-width: 800px){}

从一开始就成功。但是,当我将网站上传到服务器并从移动设备浏览该网站时,它无法正常工作。然后我学会了使用

@media only screen and (max-device-width: 800px){}

现在它工作正常(注意:中间的 -device)。

但是用-device在我的台式电脑上开发网站时,我看不到预览。所以当我在开发时,我使用的是没有 -device 的,上传后我正在使用 -device在中间。这对我来说有点奇怪。

最近我遇到了一个面试委员会,我在其中提交了一个适合移动设备的网站供审核,但是当他们调整浏览器大小时,它无法正常工作,因为在实时网站上我使用了 -device在媒体查询中。所以,这对我来说有点奇怪。

有没有一种方法可以让我编写代码,使代码既可以在具有媒体查询的桌面上工作,也可以在移动设备上工作。我试过了

@media only screen and (max-width: 800px) and (max-device-width: 800px) {}

但在我的桌面上失败了。 :(

有办法吗?

编辑

承认这一点,我在正确的方式,我正在使用

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

在我的 <head></head>标签。并使用 Respond.min.js还有。

最佳答案

 @media  screen and (min-width: 321px) and (max-width:960px){
xxxx

}
@media screen and (min-width: 720px) and (max-width:1024px){
xxxxx
}

JSFiddle

关于css - 如何为桌面和移动设备制作对移动设备友好的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24052369/

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