Блог

Главная - Вопросы по программированию - Как исправить медиа-запросы в css?

Как исправить медиа-запросы в css?

#html #css #google-chrome #media-queries

#HTML #css #google-chrome #медиа-запросы

Вопрос:

Мне нужно создать десктопную и мобильную версии сайта. Я решил использовать медиа-запросы в CSS. Но когда я их закодировал, я обнаружил, что они не работают, и я не знаю, как их исправить. Чтобы исправить эту проблему, я зашел на Youtube, где нашел этот пример, но я понял, что обнаружил, что медиа-запрос не работает. Затем я зашел в stack и обнаружил аналогичную проблему. В этом случае это было исправлено путем добавления мета-тега в head. Я сделал это, но мне это не помогло. Это не работало в Chrome и Mozilla.

 body{
    color:red;
}

@media screen and (max-width: 600){
    body{
        color: blue;
    }
}  
 <!DOCTYPE html>
<html>
<head>
    <title>The car dealer site</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <meta name="viewport" content="width=device-width,initial-scale=1">

</head>
<body>
    <h1>Title</h1><br>
    <h2>Subtitle</h2>
</body>
</html>

Ответ №1:

Вам нужно указать единицы измерения для вашего свойства max-width . Измените строку

 @media screen and (max-width: 600){

Для

 @media screen and (max-width: 600px){

И попробуйте еще раз