gpt4 book ai didi

html - 桌面和移动友好的多个@media 查询

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

好的,所以我有一个网页,网页的内容有点复杂,这意味着我需要使用 @media 更改样式超过 3 次以获得桌面分辨率,这我使用的是 @media screen and (min-width: 1024px) , @media screen and (min-width:750px) and (max-width:1049px)for desktop和 @media only screen and (max-device-width : 736px) 对于 iPhone,因为 iPhone 6+ 设备宽度为 736px。

现在我的问题是我仍然无法让它工作,每次我从我的手机打开我的网站时,它显示的是桌面风格,而不是 iPhone 风格。

最佳答案

将以下代码添加到您的 <head>部分:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

此外,您应该使用 Bootstrap 中的媒体查询:

/* Extra small devices (phones, less than 768px) */
/* No media query */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

关于html - 桌面和移动友好的多个@media 查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35255852/

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