常见的 CSS 媒体查询断点 [英] Common CSS Media Queries Break Points

问题描述

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

I am working on a Responsive Web Site with CSS Media Queries.

以下是设备的好组织吗?手机、Ipad(横向和纵向)、台式机和笔记本电脑、大屏幕

Is the following a good organization for devices? Phone, Ipad (Landscape & Portrait), Desktop and Laptop, Large Screen

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

What are the common media queries break-point values?

我打算使用以下断点:

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

你怎么看?我有几个疑问???点.

What do you think? I have a few doubts as ??? points.

推荐答案

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

Rather than try to target @media rules at specific devices, it is arguably more practical to base them on your particular layout instead. That is, gradually narrow your desktop browser window and observe the natural breakpoints for your content. It's different for every site. As long as the design flows well at each browser width, it should work pretty reliably on any screen size (and there are lots and lots of them out there.)

这篇关于常见的 CSS 媒体查询断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！