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

Question

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

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

现在，我正在使用它：

Mobile First

@media screen and（min-width：720px）=＆gt;平板手机

@media screen and（min-width：768px）=＆gt;片剂

@media screen and（min-width：1024px）=＆gt;桌面

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

Answer 1

  

响应式网页设计（RWD）是一种网页设计方法，旨在制作网站以提供最佳观看体验

设计自适应网站时，应考虑屏幕大小而不是设备类型。媒体查询可以帮助您实现这一目标。

如果您想为每个设备设置网站样式，可以使用user agent值，但不建议这样做，因为您必须努力维护新设备，新浏览器和浏览器版本的代码当使用屏幕尺寸时，所有这些都无所谓。

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

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

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

<强> TIPS

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

示例

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

---

精神状态

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

Answer 2

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

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

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

• (<768px) 电话 .col-xs- / Small devices
• (≥768px) 平板电脑 .col-sm- / Medium devices
• (≥992px) 桌面 .col-md- / Large devices
• (≥1200px) 桌面 .col-lg- / internal class Test { public static void Print() { Console.WriteLine("Test"); Console.WriteLine("Testing an invoke method"); } public static void CalcData() { Console.WriteLine("Test"); } public static void DoSomething(int c, float f) { Console.WriteLine("Test"); } public static string TestString(string s, int p, char f) { return "Happy Days"; } }

所以，这些都很好用，并且在实践中运作良好。

Answer 4

看看这个...... 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 5

我会提供我的，因为@muni的解决方案对我来说有点矫枉过正

注意：如果您想要将多个分辨率的自定义定义一起添加，请执行以下操作：

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

      .irns-desktop{
        display: none;
      }

      .irns-mobile{
        display: initial;
      }

    }

请务必在准确定义的基础上添加这些定义，以便正确级联（例如，＆＃39;智能手机肖像＆＃39;必须赢得＆＃39;移动广告＆＃39;）

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