常见的CSS媒体查询中断点

Question

我正在使用CSS媒体查询处理响应式网站.

以下是设备的良好组织吗？电话,Ipad(风景和肖像),桌面和笔记本电脑,大屏幕

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

我打算使用以下断点:

• 320:智能手机肖像
• 481:智能手机景观
• 641或768 ???:IPad Portrait ???
• 961:iPad风景/小笔记本电脑???
• 1025:台式机和笔记本电脑
• 1281:宽屏幕

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

Answer 1

而不是尝试在特定设备上定位@media规则,而是将它们建立在您的特定布局上更为实际.也就是说,逐渐缩小桌面浏览器窗口并观察内容的自然断点.每个网站都有所不同.只要设计在每个浏览器宽度上都能很好地流动,它就可以在任何屏幕尺寸上非常可靠地工作(并且那里有很多很多.)

Answer 2

我一直在用:

@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 */
}

它使事情变得相对简单,并允许你在肖像模式下为手机做一些不同的事情(很多时候我发现自己必须为它们改变各种元素).

Answer 3

我使用了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) {


}    

UPDATE

截至2015年9月,我使用的更好.我发现这些媒体查询断点与更多设备和桌面屏幕分辨率相匹配.

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

response.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){ ... }

Answer 4

这是来自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 */
}

Answer 5

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

从那以后我没有回头.它使响应式开发变得简单而不是繁琐,并且以最低的开发时间成本为所有设备提供合理的体验,而无需担心新的Android设备具有您尚未考虑的新分辨率.

Answer 6

考虑使用twitter bootstrap的断点.如此庞大的采用率你应该是安全的......

Answer 7

标准设备的媒体查询

一般用于移动,平板电脑,桌面和大屏幕

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 */
    }

参考

Answer 8

@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 --- */}