CSS-запросы СМИ перепутались

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"> 

1. я с помощью начальной загрузки, чтобы сделать его типа меньше,
2. main.css для Dekstop вид, на самом деле лучший вид только на моем рабочем столе, то есть 1920x1080p и ниже этого не идеально.
3. mobile.css для устройства, такого как телефон и планшет, и я просто получаю это за мобильное устройство по умолчанию и разрешение ipad, разрешение для Android становится немного испорченным, потому что некоторые из параметров андроидности являются грубыми и неопределенными, и если запросы на устройство устройства получаются от 768px будет перепутано,

4. 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 где я получил это медиа-запросы, а не все из них, которые я выбрал. и я добавляю некоторые из моих медиа-запросов.

самый потрясающий из всех из них - абсолютное положение и летит от 2 погружений, таких как img ниже. здесь он выглядит неплохо, но он не идеален, но я боюсь, если устройство выходит за рамки моих медиа-запросов, это будет испорчено.

так, как веб-разработчик, что ваши медиа-запросы? надеюсь, что у вас может быть некоторый ответ и вдохновение здесь.

Answer 1

Я видел, что вы используете несколько файлов для медиа-запросов. Попытайтесь объединить их в один, как media.css &, он решит половину ваших проблем. Использование медиа-запросов из нескольких файлов вызывает конфликт.