Почему я не могу загрузить оригинальный стиль после добавления медиазапроса для рабочего стола? - PullRequest
Новая
       1

Почему я не могу загрузить оригинальный стиль после добавления медиазапроса для рабочего стола?

1 голос
/ 05 февраля 2020

Во-первых, я создал стиль для мобильного представления, а вот CSS. 

.content>.hello{
	font-size: 6vw;
	color: white;
}

После этого я изменяю стиль для представления на рабочем столе 

@media only screen and (min-width:600px){
  .content>.hello{
    margin-top: 40px;;
	font-size: 5vw;
}

Итак, теперь, когда я загрузил CSS на сервер, я вижу, что медиа-запрос хорошо работает на моем ноутбуке . Когда я изменяю размер мой браузер работает хорошо Но проблема в том, что после того, как я проверил веб-сайт на моем телефоне, медиа-запрос также применяется там. Он должен иметь размер шрифта 6vw на телефоне.

Ответы [ 4 ]

1 голос
/ 05 февраля 2020

Хорошо, это решено. Я добавил этот метапорт. 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

и забыл обновить файл html на сервере. У меня ушли часы на эту проблему?.

0 голосов
/ 05 февраля 2020

Я просто попробую, как насчет этого: 

.content>.hello{
  font-size: 6vw;
  color:white;
  background-color:black;
}

@media screen and (max-width:600px){
 .content>.hello{
    font-size:5vw;
    margin-top:50px;
  }
}
<div class="content">
<div class="hello">
lorem ipsum dolor sit amet.
</div>
</div>
0 голосов
/ 05 февраля 2020

Когда я уменьшаю ширину окна браузера, я вижу изменение размера шрифта.

Разве это не проблема с кешем?

Действительно ли экран телефона меньше 600 пикселей ?

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

<link rel="stylesheet" href=".../styles.css?v=17"/>
0 голосов
/ 05 февраля 2020

Дело в том, что у вас есть два правила:

Общее правило 

.content>.hello{
    font-size: 6vw;
    color: white;
}

Это применимо ко всем устройствам.

Правило рабочего стола 

@media only screen and (min-width:600px){
  .content>.hello{
    margin-top: 40px;;
    font-size: 5vw;
}

Это применимо к рабочему столу

Возможные проблемы

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