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

问题描述

我正在使用具有CSS媒体查询的响应网站。

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

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

我打算使用以下断点：

• 320：智能手机


• 481：智能手机横幅


• 641或768 ???：IPad Portrait


• 961


• 1025：桌面和笔记本电脑


• 1281：宽屏






你觉得怎么样？我有几个疑问？

$ p


解决方案

不要尝试在特定设备上定位@media规则，布局。也就是说，逐渐缩小您的桌面浏览器窗口，并观察您的内容的自然断点。它对于每个网站都不同。只要设计在每个浏览器宽度流畅，它应该在任何屏幕尺寸上可靠地工作（而且有很多很多。）




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

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?

I am planning to use the following breakpoints:

• 320: Smartphone Portrait
• 481: Smartphone Landscape
• 641 or 768 ???: IPad Portrait ???
• 961: IPad Landscape / Small Laptop ???
• 1025: Desktop and Laptop
• 1281: Wide Screen

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

解决方案

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屋！