Question

这不是一个严肃的问题，但我只想与CSS媒体查询分享并获取更多信息。

我发现自己的CSS媒体查询非常舒服，但它仍然有太多的缺陷。正如我们都知道今天移动设备增长如此之快，其中一些设备具有相同的分辨率，适用于平板电脑甚至笔记本电脑。

让我们来看案件

这是我在index.php中的媒体查询订单

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="style/bootstrap/css/bootstrap.min.css">
    <!-- custom -->
    <link rel="stylesheet" type="text/css" href="style/css/main.css">
    <link rel="stylesheet" type="text/css" href="style/css/laptop.css">
    <link rel="stylesheet" type="text/css" href="style/css/mobile.css">

我使用bootstrap使其类型更少，
main.css用于dekstop视图，实际上是我桌面分辨率上的最佳视图，1920x1080p及以下，并非完美。
mobile.css用于设备，如手机和平板电脑，我只是得到这个默认的移动设备和ipad分辨率，Android分辨率得到一点搞砸，因为一些Android分辨率是粗糙和unidentify，如果设备媒体查询远离768px它会搞砸，

laptop.css用于笔记本电脑查看，有时它的效果不如我想象的那么好。

这是每种媒体的css代码 main.css很简单， mobile.css就像

/*default*/
@media screen and (max-width: 768px) {
  its like button, font, etc.
}


/*default Portrait*/
@media screen and (max-width: 768px) and (orientation: portrait) {
 actually its working good on both kind of device IOS and Android.
}


/* iPad Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
}


/* iPad Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
}


/*default Landscape*/
@media screen and (max-width: 768px) and (orientation: landscape) {
    this one it's a little bit tricky because some of the phone device is now has length with laptop resolution.
}

和laptop.css

@media screen 
   and (min-device-width: 1024px) 
   and (max-device-width: 1280px) 
   and (-webkit-min-device-pixel-ratio: 1) { 
i got this for an old laptop, like square laptop will do too.
   }

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
  }

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
  }

这是link，我有这个媒体查询，而不是我选择的所有查询。我添加了一些媒体查询。

所以，作为网络开发者，您的媒体查询是什么？希望你能在这里得到一些答案和灵感。

Answer 1

我看到您正在使用多个文件进行媒体查询。尝试将它们合并为一个media.css＆amp;它将解决你的一半问题。使用来自多个文件的媒体查询会导致冲突。

CSS媒体查询搞砸了

1 个答案: