query中文 - mobile css framework




媒体查询:如何定位桌面,平板电脑和移动设备? (8)

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

我希望能够瞄准桌面,平板电脑和手机。 我知道会有一些差异,但有一个可用于定位这些设备的通用系统会很好。

我发现的一些例子:

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

你认为这些“断点”应该用于每个设备?


不要针对特定​​设备或尺寸!

普遍的看法 并不是针对具体的设备或尺寸 ,而是为了重构“断点”这个术语:

  • 首先使用百分比或EMS开发移动网站,而不是像素,
  • 然后在较大的视口中尝试它并记下它开始失败的位置,
  • 重新设计布局并添加CSS媒体查询来处理破损的部分,
  • 重复这个过程直到你到达下一个断点。

您可以使用responsivepx.com来查找“自然”断点,如Marc Drummond的“断点已死”

使用自然断点

然后,“断点”成为您的移动设计开始“突破”实际点,即停止使用或视觉愉悦。 一旦你有一个良好的工作移动网站,没有媒体查询,你可以停止关注特定的大小,并简单地添加媒体查询处理连续较大的视口。

如果您不想将设计固定在精确的屏幕尺寸上,则此方法无需针对特定设备设计本身在每个断点处完整性确保它能够保持在任何尺寸。 换句话说,如果一个菜单/内容部分/无论停止在一定的大小可用, 设计一个断点为该大小而不是一个特定的设备大小。

请参阅Lyza Gardner关于行为断点的帖子,以及Zeldman关于Ethan Marcotte的帖子以及响应式网页设计如何从初始想法演变而来


常见设备断点的媒体查询

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

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

  1. 我已经使用这个site来查找分辨率,并根据实际数字开发CSS。 我的数字与上面的答案有很大不同,除了我的CSS实际上击中了所需的设备。

  2. 另外,在你的媒体查询之后有这段调试代码:例如:

    @media only screen and (min-width: 769px) and (max-width: 1281px) { /* 10 inch tablet enter here */
      body::before {
        content: "tablet to some desktop media query (769 > 1281) fired";
        font-weight: bold;
        display: block;
        text-align: center;
        background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
      }
    } 
    

    在网上得到这个,不记得确切的网站。 在每个单个媒体查询中添加此调试项目,您将看到正在应用哪个查询。


IMO这些是最好的断点:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

编辑 :精益与960网格更好地工作:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

在实践中,许多设计师将像素转换为ems,大部分b / c ems更好地承担缩放。 在标准缩放1em === 16px 。 将像素乘以1em/16px以获得ems。 例如, 320px === 20em

针对评论, min-width是“移动优先”设计中的标准,其中您首先设计最小的屏幕,然后添加不断增加的媒体查询,让您在更大和更大的屏幕上工作。 无论您喜欢min-max-还是其组​​合,都要了解您的规则顺序,请记住,如果多个规则匹配相同的元素,则后面的规则将覆盖较早的规则。


以下为我工作。 该行为在桌面上不会更改。 但在平板电脑和手机上,我扩展了导航栏以覆盖大标志图像。 请注意,根据需要为徽标高度使用边距(顶部和底部)。 对于我的情况,60px顶部和底部完美运作。 在这里检查导航栏。

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

如果你想瞄准一个设备,然后只写min-device-width 。 例如:

对于iPhone

@media only screen and (min-device-width: 480px){}

为平板电脑

@media only screen and (min-device-width: 768px){}

这里有一些很好的文章:


由于有许多不同的屏幕尺寸会随时变化,而且很可能会随时改变最佳方式,因此您的设计中必须有断点和媒体查询。

最简单的方法是获取完整的桌面设计,并在Web浏览器中打开它。 慢慢缩小屏幕使其变窄。 观察设计何时开始,“突破”,或看起来可怕和局促。 此时需要使用媒体查询的中断点。

通常为桌面,平板电脑和手机创建三组媒体查询。 但是,如果你的设计看起来不错,为什么要添加三个不必要的媒体查询的复杂性。 根据需要进行操作。


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

“@media”查询考虑了像素数量和设备像素比率,从而产生了“虚拟分辨率”,这是您在设计页面时实际考虑的因素:如果您的字体为10px固定宽度,并且“虚拟水平分辨率“为300像素,需要30个字符才能填满一条线。





tablet