多个@media 查询，适用于桌面和移动设备答案

【问题标题】：Multiple @media queries for desktop and mobile friendly多个@media 查询，适用于桌面和移动设备
【发布时间】：2016-05-17 07:14:13
【问题描述】：

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

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

【问题讨论】：

标签： html css iphone mobile media-queries

【解决方案1】：

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

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

此外，您应该使用引导程序中的这些媒体查询：

/* 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) { ... }

【讨论】：