响应式设计 - 智能手机和平板电脑的标准断点/媒体查询 [英] Responsive design - Standard Breakpoint/Media queries for smartphone and tablet

问题描述

当您为响应式设计编码时，智能手机和平板电脑的标准宽度是多少.我查看了不同的网站，但似乎没有找到任何适合标准宽度的好的模板.在编码响应式设计时，你们通常对断点/媒体查询做什么?

What are the standard width for smartphones and tablets when you code for responsive design. I looked into diffrent websites but I didn't seem to find any good templates for standard width. What do you guys usually do for breakpoint/mediaqueries when coding responsive design?

如果有人有平板电脑/智能手机等不同结果的好模板，请分享！谢谢！

If anyone has a good template of diffrent resultions for tablet/smartphone etc please share them! Thanks!

推荐答案

有两种思考 CSS 媒体查询的方式.

There is two way of thinking your CSS media querys.

第一个是桌面优先".这意味着您的基本 CSS 将针对大屏幕，然后您的媒体查询将覆盖您的类以适应较小的类.你的 CSS 可能是这样的:

First one is to go 'Desktop First'. That mean that your base CSS will aim at large screens and then your media query will overwrite your classes to adapt to smaller classes. Your CSS could go like this :

/* Large screens ----------- */
/*some CSS*/

/* Desktops and laptops ----------- */
@media only screen and (max-width : 1824px) {...}

/* iPads (landscape) ----------- */
@media only screen and (max-width : 1224px) {...}

/* iPads (portrait) ----------- */
@media only screen and (max-width : 1024px) {...}

/* Smartphones (landscape) ----------- */
@media only screen and (max-width : 768px) {...}

/* Big smartphones (portrait) (ie: Galaxy 3 has 360)*/
@media only screen and (max-width : 640px) {...}

/* Smartphones (portrait) (ie: Galaxy 1) */
@media only screen and (max-width : 321px) {...}

第二种方法是移动优先".这意味着您的基本 CSS 将针对像 iPhone 4 这样的小屏幕.然后您的媒体查询将覆盖您的类以适应更大的屏幕.这是示例:

The second approach is to go 'Mobile First'. That mean that your base CSS will aim at small screens like the IPhone 4. Then your media query will overwrite your classes to adapt to bigger screens. Here's and example :

/* Smartphones (portrait) ----------- */

/* Ipad2 (portrait) ----------- */
@media only screen and (min-width : 768px){...}

/* Ipad2 (paysage) ----------- */
@media only screen and (min-width : 1024px){...}

/* Ordi (Petit) ----------- */
@media only screen and (min-width : 1224px){...}

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

如果你真的想深入细节并利用视网膜显示，你将不得不玩弄像素比.看看这个矫枉过正的 css 样式表:media-queries-boilerplate.css.视网膜显示器的好处之一是为客户提供更高质量的图像.缺点是需要更多带宽并使网站变慢.

If you really want to go into details and take advantage of the retina display, you will have to play with the pixel ratio. Take a look at this overkill css style sheet : media-queries-boilerplate.css. One of the nice thing to do with the retina display is to provide higher quality images to the client. The downside it that it take more bandwith and make the site slower.

希望对您有所帮助.

这篇关于响应式设计 - 智能手机和平板电脑的标准断点/媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！