相关疑难解决方法(0)

我一直在研究媒体查询,我仍然不太了解如何定位某些尺寸的设备.

我希望能够定位台式机,平板电脑和移动设备.我知道会有一些差异,但是有一个可用于定位这些设备的通用系统会很不错.

我找到的一些例子:

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

要么:

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

您认为这些"断点"对于每个设备应该是什么？

我正在尝试为智能手机方向和桌面设置不同的媒体查询,我想要定位肖像和风景.我知道所有其他堆栈链接,如:

媒体查询定位大多数智能手机 3媒体查询的iphone肖像,风景和ipad肖像

但是我仍然遇到问题,我的情况不起作用,这是我正在使用的代码:

Desktop css first
   -- csss for desk --

Portrait:

   @media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
   body {
      padding: 0 !important;
   }
   .infoShowWrapper {
      width: 268px;
  }
   .heroImage {
      margin-top: 0;
      height: 200px;
      width: 100%;
      background: #fff url(assets/images/hero_small.jpg) no-repeat center center;
  }
  .navbar-fixed-top {
      margin: 0 !important;
  }
  .box-item {
      width: 280px;
  }
  .seaBkg {
      background-image: url(assets/images/mare_2x.jpg);
  }
}

Landscape:

   @media only screen and (min-device-width: 480px) and (max-device-width: 640px) {
   body {
       padding: …