CSS媒体查询会搞砸 [英] CSS media queries get messed up

问题描述

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

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

让我们来看看案例

这是我在index.php中的媒体查询顺序

  <！ - 引导程序 - > 
< link rel =stylesheettype =text / csshref =style / bootstrap / css / bootstrap.min.css> 
<！ -  custom  - > 
< link rel =stylesheettype =text / csshref =style / css / main.css> 
< link rel =stylesheettype =text / csshref =style / css / laptop.css> 
< link rel =stylesheettype =text / csshref =style / css / mobile.css> 
  

1. 我使用引导使它输入更少，


2. main.css 用于dekstop视图，实际上是我的桌面分辨率上的最佳视图，它是 1920x1080p
3. mobile.css 适用于手机和平板电脑等设备，而我刚刚得到这个对于默认的移动设备和iPad的分辨率，Android的分辨率会有点混乱，因为一些Android的解析是粗糙和不明确的，如果设备媒体查询远离 768px 它将会搞砸，


4. laptop.css 用于笔记本电脑视图，有时它的效果不如我想象的那么好。 / b>
   
   

   这是每种媒体的css代码
   main.css 是纯文本，
   mobile.css 就像

     / * default * / 
    @media屏幕和（最大宽度：768px）{
   其类似按钮，字体等
   } 
    
    
    / *默认纵向* / 
    @media屏幕和（最大宽度：768px）和（orientation：portrait）{
   实际上它在IOS和Android这两种设备上运行良好。 
   } 
    
    
    / * iPad纵向* / 
    @media屏幕
   和（最小装置宽度：768px）
   和（max-device-width：1024px）
   和（orientation：portrait）
   和（-webkit-min-device-pixel-ratio：1）{
   } 
    
    $ b $ * iPad风景* / 
    @media仅限屏幕
   和（最小设备宽度：768px）
   和（最大设备宽度：1024px）
   和（orientation：landscape）
   和（-webkit-min-device-pixel-ratio：1）{
   } 
    
    
    / *默认风景* / 
    @media屏幕和（最大宽度：768px）和（orientation：landscape）{
   这一点有点棘手，因为某些手机设备现在具有笔记本电脑分辨率的长度。 
    
     

   和 laptop.css
   
   

     @media screen 
   和（min-device-width：1024px）
   和（max-设备宽度：1280px）
   和（-webkit-min-device-pixel-ratio：1）{
   i这款笔记本电脑也适用于旧笔记本电脑，例如方笔记本电脑也会这样做。 
   } 
    
    / * -----------非视网膜屏幕----------- * / 
    @media屏幕
   和（min-device-width：1200px）
   和（max-device-width：1600px）
   和（-webkit-min-device-pixel-ratio：1）{
   } 
    
    / * -----------视网膜屏幕----------- * / 
    @media屏幕
   和（min-device-width：1200px）
   和（max-device-width：1600px）
   和（-webkit-min-device-pixel-ratio：2）
   和（min分辨率：192dpi）{
   } 
     




这是


所以，作为一个web开发者，你的媒体查询是什么？希望你能在这里留下一些答案和灵感。

解决方案

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

it's not some serious question, but i just want to share and get more information with CSS media queries.

i find my own CSS media queries very comfortable, but it still has too many flaw in it. Just as we all know that today mobile device is growing so fast, some of them has the same resolution for tablet or even for a laptop.

let's get to the case

this is my order of my media queries in 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">

1. i using bootstrap to make it type less,
2. main.css is for dekstop view, actually the best view just on my desktop resolution, which is 1920x1080p and below that is not perfect.
3. mobile.css is for device like phone and tablet, and i just get this for default mobile device and ipad resolution, android resolution get a little bit messed up because some of android resolution is rough and unidentify, and if the device media queries get away from 768px it will messed up,

4. laptop.css is for laptop view and sometimes its not working so good as i thought.

   this is the css code for each media main.css is plain, mobile.css is like

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

   and 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) { 
     }
   

this is the link where i've got this media queries, not all of them that i picked. and i adding some of my media queries.

the most terrific from all of them is the absolute position and flying from 2 dives like the img below. in here it looks still good but its not perfect, but im afraid if the device is out of my resolution media queries it will be messed up.

so, as a web developer, what is your media queries? hope u can drop some answer and inspiration in here.

解决方案

I saw that you are using multiple files for media queries. Try to combine them in one as media.css & it will solve half of your problems. Using media queries from multiple files causes conflict.

这篇关于CSS媒体查询会搞砸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！