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

Question

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

正如你可以在这个表上看到，甚至有单个类型的设备有很多不同的分辨率。随着移动设备上的分辨率越来越高，很难知道应用于特定分辨率的设计。

现在，我使用这样的：

移动首先

@media屏幕和（最小宽度：720像素）=>平板手机

@media屏幕和（最小宽度： 768px）=>平板

@media屏幕（最小宽度：1,024）=>桌面

感谢您的任何意见或recomendations！

Answer 1

自适应网页设计（RWD）是一种Web设计方法旨在各具特色的网站，以提供最佳的观看体验

当你设计自适应网站，你应该考虑的屏幕，而不是大小设备类型。媒体查询可帮助您做到这一点。

如果你想为每个设备设置你的站点的风格，你可以使用user agent的值，但这不被推荐，因为你必须努力维护你的代码，以适应新设备，新浏览器，浏览器版本等，而当使用屏幕尺寸，所有这些都无关紧要。

您可以看到一些标准分辨率in this link。

但是，在我看来，你应该首先设计你的网站布局，然后才用媒体查询来调整它以适应可能的屏幕尺寸。

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

TIPS

1. 设计自适应网页时，在您的桌面浏览器中打开它，并改变浏览器的宽度看到屏幕的宽度是如何影响你的布局和风格。
2. 使用百分比而不是像素，它会使您的工作更轻松。

例

我有5列的表。当屏幕尺寸大于600像素时数据看起来很好，所以我在600像素处添加断点，并在屏幕尺寸较小时隐藏1个不太重要的列。大屏幕设备（例如台式机和平板电脑）将显示所有数据，而具有小屏幕的手机将显示部分数据。

---

头脑

没有直接关系，在响应式设计的问题，但重要的方面的状态。 响应式设计还与用户在使用移动电话或桌面时的心态不同有关。例如，当您在晚上打开银行网站并查看您的股票时，您需要在屏幕上输入尽可能多的数据。当你在午餐时间打开同一页面时，你可能想看到一些重要的细节，而不是去年的所有图表。

Answer 2

看看这个... http://getbootstrap.com/

对于大网站，我用Bootstrap，有时（以一个简单的网站）我创造一切与一些@mediaqueries风格。这非常简单，只需考虑所有代码百分比。

.container { 
max-width: 1200px; 
width: 100%; 
margin: 0 auto; 
} 

容器内，你的结构必须有宽度在这样的百分...

.col-1 { 
width: 40%; 
float: left; 
} 

.col-2 { 
width: 60%; 
float: left; 
} 

@media screen and (max-width: 320px) { 
.col-1, .col-2 { width: 100%; } 
} 

在一些简单的界面，如果你开始开发这样的项目，你将有很大的有机会有一个完全响应的网站使用断点只调整对象的流量。

Answer 3

这是常见设备断点的媒体查询。

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

屏幕宽度自举的V3.x用途如下：

• Extra small devices电话(<768px)/.col-xs-
• Small devices片剂(≥768px)/.col-sm-
• Medium devices个桌面(≥992px)/.col-md-
• Large devices桌面(≥1200px)/.col-lg-

所以，这些都是很好的使用，并在实践中很好地工作。

Answer 5

，我会提供我的，因为@muni解决方案已被我

笔记有点大材小用：如果你想为若干决议添加自定义的定义放在一起，说是这样的：

//mobile generally 
@media screen and (max-width: 1199) { 

     .irns-desktop{ 
     display: none; 
     } 

     .irns-mobile{ 
     display: initial; 
     } 

    } 

要一定要添加的准确定义之上的定义，所以它级联正确为什么你需要分配（如“智能人像”一定要赢对应的是“移动一般”）

//here all definitions to apply globally 


//desktop 
@media only screen 
and (min-width : 1200) { 


} 

//tablet landscape 
@media screen and (min-width: 1024px) and (max-width: 1600px) { 

} // end media query 

//tablet portrait 
@media screen and (min-width: 768px) and (max-width: 1023px) { 

}//end media definition 


//smartphone landscape 
@media screen and (min-width: 480px) and (max-width: 767px) { 

}//end media query 



//smartphone portrait 
@media screen /*and (min-width: 320px)*/ 
and (max-width: 479px) { 

} 

//end media query