css - 常见的 CSS 媒体查询断点

标签 css responsive-design media-queries

<分区>

我正在使用 CSS 媒体查询开发响应式网站。

以下是否适合设备组织? 电话、Ipad(横向和纵向)、台式机和笔记本电脑、大屏幕

常见的媒体查询断点值是什么?

我打算使用以下断点:

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

你怎么看?我有一些疑问,因为???点数。

最佳答案

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

关于css - 常见的 CSS 媒体查询断点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16443380/

相关文章:

javascript - 在浏览器宽度较小后将站点重定向到具有视频背景的特殊站点?

html - 如何在 CSS 中重新定位此菜单?

html - 正文中的 CSS 媒体查询

ruby-on-rails - tinymce-rails 设置 content_css

javascript - 从 jquery 中的所有后代中删除样式属性

css - Chrome 将 css 文件渲染为元素检查器中的样式标签

html - 使元素粘在它们的父容器上

javascript - Bootstrap Navbar 颜色在按下时不改变

html - 使用内联 img 宽度而不是 css

html - 使 div 网格填充其分配的空间