媒体查询响应设计:屏幕大小？
我正在致力于响应设计的网站使用媒体查询。但是，我不知道如何采取一个好的宽度设置。
正如您在这张表上所看到的，即使对于单一类型的设备，也有许多不同的分辨率。而且，随着移动设备的分辨率越来越大，很难知道具体的解决方案是什么设计。
现在，我用的是：
移动第一
@媒体屏幕和(最小宽度:720 and ) => Phablet
@媒体屏幕和(最小宽度:768 and ) =>平板
@媒体屏幕和(最小宽度:1024 and ) =>桌面
感谢您的任何建议或建议！
回答 5
Stack Overflow用户
发布于 2014-02-05 10:54:27
响应Web设计(RWD)是一种Web设计方法，旨在制作站点以提供最佳的浏览体验
当您设计响应网站时，您应该考虑屏幕的大小，而不是设备类型。媒体查询可以帮助您做到这一点。
如果您想为每个设备设置站点的样式，您可以使用user agent值，但这是不建议的，因为您必须努力维护新设备、新浏览器、浏览器版本等的代码，而当使用屏幕大小时，这一切都无关紧要。
您可以看到一些标准分辨率在这个链接中。
但是，在我看来，你应该先设计你的网站布局，然后再用媒体查询来调整它以适应可能的屏幕大小。
为什么？正如我之前说过的，屏幕分辨率的变化很大，如果您要设计一个针对320 be的移动版本，您的站点将不会被优化为350 be屏幕或400 be屏幕。
TIPS
- 设计响应页面时，请在桌面浏览器中打开它，并更改浏览器的宽度，以查看屏幕的宽度如何影响您的布局和样式。
- 使用百分比而不是像素，这将使您的工作更容易。
示例
我有一张五栏的桌子。当屏幕大小大于600 is时，数据看起来很好，因此我在600 is上添加了一个断点，当屏幕大小较小时隐藏了一个不太重要的列。台式机和平板电脑等大屏幕设备将显示所有数据，而屏幕较小的移动电话将显示部分数据。
心态
不直接关系到问题，但在响应设计的重要方面。响应性设计还涉及这样一个事实，即用户在使用移动电话或桌面时有不同的心态。例如，当你在晚上打开你银行的网站，检查你的股票时，你需要屏幕上的数据。当你在午休时间打开同样的页面时，你可能希望看到一些重要的细节，而不是去年的所有图表。
Stack Overflow用户
发布于 2014-10-28 02:40:25
以下是对常见设备断点的媒体查询。
/* 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 */
}Stack Overflow用户
发布于 2016-06-26 10:36:08
引导程序v3.x使用的屏幕宽度如下：
Extra small devices电话(<768px)/.col-xs-Small devices片(≥768px)/.col-sm-Medium devices台式机(≥992px)/.col-md-Large devices台式机(≥1200px)/.col-lg-
因此，这些都是很好的使用和工作在实践中。
https://stackoverflow.com/questions/21574881
复制相似问题
腾讯云开发者
