桌面和移动友好的多个@media 查询
Multiple @media queries for desktop and mobile friendly
好的，所以我有一个网站，网站的内容有点复杂，这意味着我需要使用 @media 更改样式超过 3 次以获得桌面分辨率，我使用是 @media screen and (min-width: 1024px) ， @media screen and (min-width:750px) and (max-width:1049px) 对于桌面和 @media only screen and (max-device-width : 736px) 对于 iPhones ，因为 iPhones 6+ 设备宽度是 736px。
现在我的问题是我仍然无法让它工作，每次我从 phone 打开我的网站时，它显示的是桌面风格，而不是 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) { ... }
好的，所以我有一个网站，网站的内容有点复杂，这意味着我需要使用 @media 更改样式超过 3 次以获得桌面分辨率，我使用是 @media screen and (min-width: 1024px) ， @media screen and (min-width:750px) and (max-width:1049px) 对于桌面和 @media only screen and (max-device-width : 736px) 对于 iPhones ，因为 iPhones 6+ 设备宽度是 736px。
现在我的问题是我仍然无法让它工作，每次我从 phone 打开我的网站时，它显示的是桌面风格，而不是 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) { ... }