178

我正在开发一个带有 CSS 媒体查询的响应式网站。

以下是设备的良好组织吗？电话、Ipad（横向和纵向）、台式机和笔记本电脑、大屏幕

常见的媒体查询断点值有哪些？

我打算使用以下断点：

  • 320：智能手机肖像
  • 481：智能手机景观
  • 641 或 768 ???: iPad 肖像 ???
  • 961：iPad横向/小型笔记本电脑？？？
  • 1025：台式机和笔记本电脑
  • 1281：宽屏

你怎么看？我有几个疑问？？？点。

4

13 回答 13

198

与其尝试将@media 规则定位在特定设备上，不如将它们基于您的特定布局可能更实用。也就是说，逐渐缩小桌面浏览器窗口并观察内容的自然断点。每个站点都不同。只要设计在每个浏览器宽度上都能很好地运行，它就应该在任何屏幕尺寸上都非常可靠地工作（而且那里有很多很多。）

于 2013-05-08T15:43:17.537 回答
98

我一直在使用：

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}

它使事情变得相对简单，并允许您在纵向模式下为手机做一些不同的事情（很多时候我发现自己不得不为它们更改各种元素）。

于 2013-05-08T14:54:07.617 回答
97

我使用了 4 个断点，但正如 ralph.m 所说，每个站点都是独一无二的。你应该试验一下。由于设备、屏幕和分辨率如此之多，因此没有神奇的断点。

这是我用作模板的内容。我正在检查网站上不同移动设备上的每个断点，并更新每个元素（ul、div 等）的 CSS，但该断点未正确显示。

到目前为止，这是在我制作的多个响应式网站上工作的。

/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {


}

/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {


}

/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {


}


/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {


}

更新

根据 2015 年 9 月，我使用的是更好的。我发现这些媒体查询断点匹配更多的设备和桌面屏幕分辨率。

在 style.css 上拥有桌面的所有 CSS

responsive.css 上的所有媒体查询：响应式菜单的所有 CSS + 媒体断点

@media only screen and (min-width: 320px) and (max-width: 479px){ ... }

@media only screen and (min-width: 480px) and (max-width: 767px){ ... }

@media only screen and (min-width: 768px) and (max-width: 991px){ ... }

@media only screen and (min-width: 992px){ ... }

2019 年更新：根据下面的 Hugo 评论，由于新的非常宽的屏幕，我删除了 max-width 1999px。

于 2014-07-09T21:52:52.287 回答
52

这是来自 css-tricks链接

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
于 2013-11-30T07:44:43.700 回答
17

我可以告诉你，我只在 768 处使用了一个断点——即为min-width: 768px平板电脑和台式机提供服务，以及max-width: 767px为手机提供服务。

从那以后我再也没有回头。它使响应式开发变得轻松而不是繁琐，并以最低的开发时间成本在所有设备上提供合理的体验，而无需担心具有您未考虑的新分辨率的新 Android 设备。

于 2013-05-08T14:43:28.570 回答
12

标准设备的媒体查询

一般适用于手机、平板电脑、台式机和大屏幕

1. 手机 

 /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {

    /* Styles */

    }

2. 平板电脑

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {

         /* Styles */

    }

3. 台式机和笔记本电脑

@media only screen 
and (min-width : 1224px) {

    /* Styles */

}

4.更大的屏幕

@media only screen 
and (min-width : 1824px) {

    /* Styles */

}

详细包括横向和纵向

/* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    /* Styles */
    }

    /* Smartphones (landscape) ----------- */
    @media only screen 
    and (min-width : 321px) {
    /* Styles */
    }

    /* Smartphones (portrait) ----------- */
    @media only screen 
    and (max-width : 320px) {
    /* Styles */
    }

    /* Tablets, iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Styles */
    }

    /* Tablets, iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
    }

    /* Tablets, iPads (portrait) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
    /* Styles */
    }

    /* Desktops and laptops ----------- */
    @media only screen 
    and (min-width : 1224px) {
    /* Styles */
    }

    /* Large screens ----------- */
    @media only screen 
    and (min-width : 1824px) {
    /* Styles */
    }

    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }

参考

于 2014-05-26T10:28:21.873 回答
11

考虑使用twitter bootstrap的断点。拥有如此高的采用率，您应该是安全的...

于 2013-12-29T12:37:07.407 回答
7 

@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/}
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/}
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/}
@media only screen and (min-width : 690px) and (max-width : 800px) {/*--- Tablet portrait ---*/}
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/}
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */}
于 2014-05-27T08:08:58.330 回答
4

如果你去你的谷歌分析，你可以看到你的网站访问者使用的屏幕分辨率：

受众 > 技术 > 浏览器和操作系统 > 屏幕分辨率（在统计数据上方的菜单中）

我的网站每月大约有 5,000 名访问者，而responsinator.com免费版所使用的尺寸非常准确地概括了我的访问者的屏幕分辨率。

这可以使您不必过于完美主义。

于 2014-04-09T14:04:42.600 回答
4

我总是首先使用桌面，移动优先没有最高优先级，不是吗？IE< 8 将显示移动 CSS ..

normal css here: 

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

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

有时一些自定义尺寸。我不喜欢引导等。

于 2015-01-22T14:04:59.530 回答
3

而不是使用像素应该使用 em 或百分比，因为它更具适应性和流动性，最好不要将目标设备定位到您的内容：

HTML5 摇滚乐阅读，移动优先

于 2014-02-21T17:20:50.407 回答
3

保持代码干净，样式表在每个屏幕“媒体”类型配置中逻辑分离...


1）使用上面的 himansu 答案作为参考：Common CSS Media Queries Break Points
AND
2）https://www.w3schools.com/css/ css3_mediaqueries.asp

你的答案是：

<link rel="stylesheet" media="@media only screen and (min-width : 320px) and (max-width : 480px)" href="mobilePortrait.css">

<link rel="stylesheet" media="@media only screen and (min-width : 481px) and (max-width : 595px)" href="mobileLandscape.css">
于 2017-05-23T11:20:19.150 回答
2

你的断点看起来真的很好。我已经在三星平板电脑上试过768px了，而且还不止于此，所以我真的很喜欢961px. % width/max-width如果您使用响应式 CSS 技术，例如块和图像（文本也是如此），则不一定需要所有这些。

于 2013-11-15T00:33:56.370 回答