媒体查询的响应式设计:屏幕尺寸？

Question

我正在使用媒体查询处理响应式设计的网站.但我不知道如何采取良好的宽度设置.

正如您在此表中所看到的,即使对于单一类型的设备,也存在许多不同的分辨率.随着移动设备上的分辨率越来越高,很难知道适用于特定分辨率的设计.

现在,我正在使用这个:

移动优先

@media screen和(min-width:720px)=> Phablet

@media screen和(min-width:768px)=>平板电脑

@media屏幕和(min-width:1024px)=>桌面

感谢您的任何建议或推荐!

Answer 1

以下是常见设备断点的媒体查询.

    /* 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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

Answer 2

响应式网页设计(RWD)是一种Web设计方法,旨在制作网站以提供最佳的观看体验

在设计响应式网站时,您应该考虑屏幕的大小而不是设备类型.媒体查询可以帮助您实现这一目标.

如果您想为每个设备设置网站样式,可以使用该user agent值,但不推荐这样做,因为在使用屏幕尺寸时,您必须努力维护新设备,新浏览器,浏览器版本等的代码,所有这一切并不重要.

您可以在此链接中看到一些标准分辨率.

但是,在我看来,您应首先设计您的网站布局,然后再使用媒体查询调整它以适应可能的屏幕尺寸.

为什么？正如我之前所说,屏幕分辨率变化很大,如果你设计一个针对320px的移动版本,你的网站将不会优化为350px屏幕或400px屏幕.

提示

1. 设计响应式页面时,请在桌面浏览器中打开它并更改浏览器的宽度,以查看屏幕宽度如何影响您的布局和样式.
2. 使用百分比而不是像素,这将使您的工作更轻松.

例

我有一个5列的表.当屏幕尺寸大于600px时,数据看起来很好,所以我在600px处添加断点,并在屏幕尺寸较小时隐藏1个不太重要的列.具有大屏幕的设备(例如台式机和平板电脑)将显示所有数据,而具有小屏幕的移动电话将显示部分数据.

心态

与问题没有直接关系,但在响应式设计中却是重要的方面.响应式设计还涉及用户在使用移动电话或桌面时具有不同心态的事实.例如,当您在晚上打开银行网站并检查您的股票时,您需要在屏幕上显示尽可能多的数据.当您在午休时打开同一页时,您可能希望看到一些重要的细节而不是去年的所有图表.

Answer 3

Bootstrap v3.x使用的屏幕宽度如下：

• Extra small devices 电话 (<768px)/.col-xs-
• Small devices 片剂 (?768px)/.col-sm-
• Medium devices 台式机 (?992px)/.col-md-
• Large devices 台式机 (?1200px)/.col-lg-

因此，这些很好用并且在实践中运行良好。