我一直在做一些关于媒体查询的研究,但我仍然不太明白如何针对特定尺寸的设备。

我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异,但如果有一个通用的系统可以用来针对这些设备就好了。

我找到了一些例子:

# 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) 

Or:

# 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)

每个设备的断点应该是什么?


当前回答

这只适用于那些还没有对网站进行“移动优先”设计,并正在寻找一个快速临时解决方案的人。

适用于流动电话

@media (max-width:480px){}

为平板电脑

@media (max-width:960px){}

为什么-桌面

@media (min-width:1025px){}

对于高分辨率笔记本电脑

@media (max-width:1280px){}

其他回答

@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }

该行为在桌面上不会改变。但在平板电脑和手机上,我将导航栏展开以覆盖大的logo图像。注意:使用边缘(顶部和底部)尽可能多的你需要你的标志高度。

对于我的例子,60px的顶部和底部工作完美!

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

检查这里的导航栏。

这不仅仅是关于分辨率,你还需要找到设备的DPR: whatismyscreenresolution “设备像素比(DPR)是设备制造商提供的一个数字,用于HiDPI(每英寸高点数)或Retina(苹果的商标)显示器。”

媒体查询示例:(最小分辨率:3.0dppx)

如果你想创建更具体的媒体查询,这里有一个IPhone的例子,从这个链接https://css-tricks.com/snippets/css/media-queries-for-standard-devices/复制,你可以在这个链接中找到更多设备的媒体查询)

/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- iPhone 6+, 7+ and 8+ ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { } /* Portrait */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { } /* ----------- iPhone X ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) { } /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { }

这不是像素数的问题,而是屏幕上字符的实际大小(以毫米或英寸为单位)的问题,这取决于像素密度。 因此,“min-width:”和“max-width:”是无用的。 关于这个问题的完整解释如下: 设备像素比到底是什么?

“@media”查询会考虑像素数和设备像素比,从而产生“虚拟分辨率”,这是你在设计页面时必须考虑的问题:如果你的字体固定宽度为10px,“虚拟水平分辨率”为300 px,那么一行就需要30个字符。