媒体查询:如何定位台式机,平板电脑和移动设备?


470

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

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

我发现了一些例子:

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

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



Answers:


643

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

实际上,许多设计人员将像素转换为em,主要是b / c em可以更好地进行缩放。在标准变焦下1em === 16px。将像素乘以1em/16px得到em。例如,320px === 20em

为了回应评论,这min-width是“移动优先”设计的标准,其中您从设计最小的屏幕开始,然后添加越来越多的媒体查询,然后在越来越大的屏幕上工作。无论您是偏爱min-max-还是它们的组合,都应了解规则的顺序,请记住,如果多个规则与同一元素匹配,则后面的规则将覆盖前面的规则。


1
我一直在想增加媒体查询的下限。似乎合乎逻辑,但没有看到太多提及。我什至更进一步,并转换为ems。通过缩放和px媒体查询查看Ethan Marcotte的网站行为的@jonikorpi屏幕截图。 github.com/scottjehl/Respond/issues/18
Larry

21
为什么要使用最小宽度而不是最大宽度?如何防止min-width: 320pxCSS覆盖min-width: 801px
user2019515 2013年

2
该代码在我的移动设备上不起作用!有人可以提供一个有效的例子!
2013年

3
有人有与此相同的“最大宽度”吗?
Pylinux

6
2018-2k和4k不断增加
亚历山大

160

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

一般的智慧不针对特定的设备或大小,而是重新塑造了“断点”一词:

  • 首先使用百分比或ems(而不是像素)开发用于移动设备的网站,
  • 然后在更大的视口中尝试,并记下它开始失败的地方,
  • 重新设计布局并添加CSS媒体查询,以处理损坏的部分,
  • 重复该过程,直到到达下一个断点。

您可以使用activepx.com查找“自然的”断点,就像Marc Drummond的“断点已死”一样

使用自然断点

然后,“断点”成为您的移动设计开始“断”实际点,即不再可用或视觉上令人愉悦。一旦有了一个运行良好的移动站点,而没有媒体查询,您就可以不再担心特定的大小,而只需添加处理连续较大视口的媒体查询即可。

如果您不打算将设计固定在确切的屏幕尺寸上,则这种方法可以消除针对特定设备的需求设计本身在每个断点处完整性确保它可以承受任何大小。换句话说,如果菜单/内容部分/任何内容在特定大小下不再可用,请为该大小而不是特定设备大小)设计一个断点

请参阅Lyza Gardner关于行为断点的文章,以及Zeldman关于Ethan Marcotte的文章以及响应式Web设计如何从最初的想法演变而来

使用语义标记

另外,更简单,更语义DOM结构navheadermainsectionfooter等(避免像可憎div class="header"嵌套内div标签)就越容易将是工程师的反应,特别是通过避免浮动CSS网格布局(莎拉Drasner的网格生成是一个强大的工具)和flexbox,可根据您的RWD设计计划进行安排和重新排序。


10
客户希望他们的网站在iPad上看起来像这样。我最好的断点是让网站切换到iPad上的移动版式。客户不会接受,他们希望精美版本出现在iPad和其他平板电脑上。一般的想法是不付我的薪水:)我需要用viewport meta标签做一些技巧。这非常痛苦,但是我在JavaScript的帮助下(一如既往)将其取消了。PS:我使用的是厘米单位,而不是像素。
罗夫2014年

使用自然断点,您可以拥有一个中型断点,其中包括处于横向模式的iPad(和其他平板电脑),或者为纵向模式添加另一个断点。我有时会使用四个断点,始终以移动优先的方式开始CSS和所有标记的开发(缩小规模和专注于移动技术比较困难,这意味着您的设计和内容被缩减为基本要素,可以随着大小的增加而扩展) ,一种宽度刚好超过400像素(或“超过移动尺寸”),然后是两种桌面尺寸,一种是超宽尺寸。然后,您可以设置“移动以上”断点的样式,以使其在iPad上正常工作。
戴夫·埃弗里特

2
这还不足以适用于所有情况。以复选框为例。它们可能适合PC上的所有Web浏览器,但对于平板电脑来说,对于用户来说应该很小。有时您确实需要针对设备,无论这是否是一般常识。这是一篇很好的文章:html5rocks.com/en/mobile/cross-device
monalisa717

2
我与Dave在一起,因为有太多设备无法为所有设备设计。使用自然断点可确保您的网站在任何可用屏幕尺寸下均能正常工作。关于希望他们的网站看起来有某种方式的客户-您需要对其进行培训。关于复选框太小-标签在哪里?
diggersworld 2014年

@ user1411056-好文章。我想这取决于您的目标以及网站/ webapp的工作方式。我想说,基本的响应式设计应该在完善之前就支撑一切。diggersworld我全心全意地教育客户-他们为什么还要付钱给您?是的,复选框可以响应。点击标签是等效的,并且可以设置标签样式。然后,在触摸设备上悬停就没有用了。可以有大屏幕,并具有300ms的点击延迟。一个基本的RD基础,由JS增强。
戴夫·埃弗里特

154

如果要定位设备,则只需写入min-device-width。例如:

对于iPhone

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

对于平板电脑

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

这里有一些不错的文章:


32
我的平板电脑的宽度为2560x1600
LeeGee 2014年

36
可能是这样,但是移动设备上的浏览器具有“设备像素比率”。在这里它将每个逻辑“像素”视为设备上的2、3甚至更多实际像素。否则20px高将非常小且无法按下-特别是在屏幕上!
greg84 2014年

6
@media only屏幕和(最小设备宽度:480像素){}我尝试了-与台式机也匹配。但是,如果我们只想要移动设备怎么办?
Darius.V 2014年

@ Darius.V,遵循“移动优先”的思想,这意味着您开始移动并在屏幕变大时进行更改,因此您还需要包括:@media only screen and (min-device-width: 1024){}或类似的东西来覆盖这些更改。或者,你可以做@media only screen and (MAX-device-width: 1024){},如果你开始与桌面设计,并希望使只有东西比1024更小的变化
钢铁般

这意味着由于最小设备宽度,台式机无法使用RWD。建议做最小宽度,而不是基于设备。真正的响应式响应不需要刷新或设备受限
TheBlackBenzKid 16'Jan 21'8

50
  1. 我已经用过了 站点查找了分辨率,并根据实际数字开发了CSS。我的电话号码与上述答案有很大的不同,除了我的CSS实际上能打到所需的设备。

  2. 另外,在您的媒体查询之后立即拥有以下调试代码段:

    @media only screen and (min-width: 769px) and (max-width: 1281px) { 
      /* for 10 inches tablet screens */
      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;
      }
    } 

    在每个单个媒体查询中添加此调试项,您将看到正在应用的查询。


27

Twitter Bootstrap推荐的最佳断点

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

25

媒体查询常见设备断点

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

19
  1. 超小型设备(电话,最大480px)
  2. 小型设备(平板电脑,768像素及以上)
  3. 中型设备(大型横向平板电脑,笔记本电脑和台式机,992px及以上)
  4. 大型设备(大型台式机,1200px及以上)
  5. 纵向电子阅读器(Nook / Kindle),较小的平板电脑-最小宽度:481px
  6. 人像平板电脑,人像iPad,横向电子阅读器-最小宽度:641px
  7. 平板电脑,横向iPad,低分辨率笔记本电脑-最小宽度:961px
  8. HTC一台设备宽度:360像素设备高度:640像素-webkit-device-pixel-ratio:3
  9. Samsung Galaxy S2设备宽度:320px设备高度:534px -webkit-device-pixel-ratio:1.5(min-moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio: 3/2),(最小设备像素比率:1.5
  10. Samsung Galaxy S3设备宽度:320像素设备高度:640像素-webkit-device-pixel-ratio:2(最小-moz-device-pixel-ratio:2),-较旧的Firefox浏览器(Firefox 16之前的版本)-
  11. 三星Galaxy S4设备宽度:320像素设备高度:640像素-webkit-device-pixel-ratio:3
  12. LG Nexus 4设备宽度:384px设备高度:592px -webkit-device-pixel-ratio:2
  13. 华硕Nexus 7设备宽度:601像素设备高度:906像素-webkit-min-device-pixel-ratio:1.331)和(-webkit-max-device-pixel-ratio:1.332)
  14. iPad 1和2,iPad Mini设备宽度:768像素设备高度:1024像素-webkit-device-pixel-ratio:1
  15. iPad 3和4设备宽度:768像素设备高度:1024像素-webkit-device-pixel-ratio:2)
  16. iPhone 3G设备宽度:320px设备高度:480px -webkit-device-pixel-ratio:1)
  17. iPhone 4设备宽度:320px设备高度:480px -webkit-device-pixel-ratio:2)
  18. iPhone 5设备宽度:320像素设备高度:568像素-webkit-device-pixel-ratio:2)

1
Sansung Galaxy S3 @media only屏幕和(设备宽度:720px)和(设备高度:1280px)和(-webkit-min-device-pixel-ratio:2)经过测试并正常工作。
user2060451 2014年

5

这与像素数无关,而与屏幕上字符的实际大小(毫米或英寸)有关,这取决于像素密度。因此,“最小宽度:”和“最大宽度:”是没有用的。对此问题的完整解释是: 设备像素比到底是多少?

“ @media”查询会考虑像素数和设备像素比率,因此会产生“虚拟分辨率”,这是设计页面时必须实际考虑的:如果字体为10px固定宽度,而“虚拟水平分辨率”为300像素,需要30个字符才能填充一行。


7
大。那么媒体查询应该是什么呢?
PKHunter '17

4

如今,最常见的是看到视网膜屏幕设备,换句话说:具有高分辨率和很高像素密度(但通常​​小于6英寸物理尺寸)的设备。这就是为什么在CSS上需要视网膜显示专门的媒体查询的原因。这是我能找到的最完整的示例:

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

资料来源:CSS-Tricks网站


4

由于屏幕尺寸很多,并且总是在变化,因此很可能会一直在变化,因此最好的方法是根据您的断点媒体 查询作为设计的基础。

最简单的方法是获取完整的桌面设计并在Web浏览器中打开它。缓慢缩小屏幕以使其更窄。观察一下设计何时开始“断裂”,或看起来多么恐怖和局促。此时,将需要一个带有媒体查询的断点。

通常会为台式机,平板电脑和手机创建三组媒体查询。但是,如果您的设计在这三个方面都看起来不错,那么为什么要添加三个不必要的不​​同媒体查询的复杂性呢?根据需要进行操作!


3

一项附加功能是,您还可以在标签的媒体属性中使用媒体查询<link>

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

这样,浏览器将下载所有CSS资源,而与媒体属性无关。 不同之处在于,如果将media属性的media-query评估为false,则该.css文件及其内容将不会被渲染阻止。

因此,建议使用标签中的media属性,<link>因为这样可以保证更好的用户体验。

在这里您可以阅读有关此问题的Google文章https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

一些工具可以帮助您根据媒体查询自动将CSS代码分隔在不同文件中

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query


2

该行为在台式机上不会更改。但是在平板电脑和手机上,我扩展了导航栏以覆盖大徽标图像。注意:根据需要使用徽标边距所需的边距(顶部和底部)

就我而言,顶部和底部60像素的效果很好!

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

此处检查导航栏。


2
  • 小型设备〜手机(<768px)
  • 小型装置〜平板电脑(> = 768像素)
  • 中型设备〜台式机(> = 992px)
  • 大型设备〜台式机(> = 1200px)

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

/* 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, 7, 8 ----------- */
@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+, 7+, 8+ ----------- */
@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 */
}

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

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

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* 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
@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

    }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.