несовместимого размера шрифта при использовании медиа-запросов и браузер увеличения

я создал следующий HTML страницу:несовместимого размера шрифта при использовании медиа-запросов и браузер увеличения

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <meta name="viewport" content="width=device-width" /> 
    <style> 
     @media only screen and (max-width: 320px) 
     { 
      .text 
      {     
       font-size:0.3em; 
      } 
     } 
     @media only screen and (min-width: 321px) and (max-width: 480px) 
     { 
      .text 
      {     
       font-size:0.6em; 
      } 
     } 
     @media only screen and (min-width: 481px) and (max-width: 600px) 
     { 
      .text 
      {     
       font-size:0.9em; 
      } 
     } 
     @media only screen and (min-width: 601px) and (max-width: 768px) 
     { 
      .text 
      {     
       font-size:1.2em; 
      } 
     } 
     @media only screen and (min-width: 769px) and (max-width: 1024px) 
     { 
      .text 
      {     
       font-size:1.5em; 
      } 
     } 
     @media only screen and (min-width: 1025px) and (max-width: 1200px) 
     { 
      .text 
      {     
       font-size:1.8em; 
      } 
     } 
     @media only screen and (min-width: 1201px) 
     { 
      .text 
      {     
       font-size:2em; 
      } 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div class="text">    
      text text text text 
     </div> 
    </form> 
</body> 
</html>

когда я приближать от 100% до 500%, используя шаги Broswer по умолчанию (100 %, 110%, 125%, ...) размер шрифта увеличивается в несколько первых шагов, а затем уменьшается на некоторых из следующих шагов несогласованным образом. это происходит во всех основных браузерах: - хром 51.0.2704.103 - то есть 11 - светлячок 43.0.1 любая помощь будет оценена благодаря

источник

2016-07-24 Sagi

Увеличить делает шрифт больше. Ваш медиа-запрос делает шрифт меньше. Эти двое сражаются друг с другом.

Это происходит из-за того, что при увеличении размера пикселей пиксели в окне меньше пикселей, что делает медиа-запросы для меньших окон.

Данное поведение относится к настольным браузерам. Мобильные браузеры не используют размер окна для медиа-запросов, а вместо этого используют размер экрана (roughly).

В других случаях, когда размеры шрифтов являются странно, это может быть из-за text-size-adjust.

источник

2016-07-24 11:51:07 Kornel

спасибо за ответ, цель медиа-запросов - создать точки разрыва и сделать страницу чувствительной к изменению размера окна на рабочем столе, но проблема (как уже упоминалось) функциональность масштабирования браузера не работает хорошо со средой запросов, есть ли способ их достижения без использования javascript? – Sagi

Масштабируемая функциональность работает * точно так, как предполагалось * со средствами массовой информации. Не забывайте, что CSS 'px' unit ** не является пикселем экрана **, а является абстрактной точкой переменного размера, которая увеличивается или уменьшается с помощью масштабирования. – Kornel

Я понимаю, что он отлично работает по определению, но в некоторых случаях, когда пользователь, увеличивающий размер шрифта, уменьшается, что противоречит ожидаемому результату пользователя, есть ли способ предотвратить это и достичь ожидаемого результата пользователя при масштабировании? – Sagi

несовместимого размера шрифта при использовании медиа-запросов и браузер увеличения

ответ

Смежные вопросы