@VeilMourner

Почему не работает @media запрос?

Помогите разобраться, почему не работает медиа запрос. Тестил на разных устройствах, результат одинаковый. Не исключаю что ошибка в коде, так как код повзаимствовал.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

html {
    font-size: 10px;
	display: block;
}

body {
    display: block;
    margin: 8px;
	line-height: 1;
}




.container {
    height: 100vh;
    min-height: 534px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    background-color: purple;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}

.pages {
    width: calc(100% - 1rem);
    flex-grow: 3;
    display: flex;
    align-items: center;
    justify-content: stretch;
    padding: .5rem;
}



header {
	width: calc(100% - 1rem);
    flex-grow: 3;
    display: flex;
    align-items: center;
    justify-content: stretch;
    padding: .5rem;
}

form {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    height: 70vh;
    min-height: 38.2rem;
    width: 100%;
    padding: 1.5rem 1rem 4rem;
    margin-bottom: 3rem;
    border-radius: 8px;
    background-color: rgba(255,255,255,.85);
	
}

.pages__text {
    flex-grow: 2;
    text-align: center;
    padding-bottom: 1.1rem;
}

.text_style_regular {
    font-size: 1.4rem;
    line-height: 1.9rem;
}

.text {
    color: rgba(0,0,0,.9);
    font-family: open sans,sans-serif;
}

.js-current-page {
    display: block;
}

.pages__item {
    flex-grow: 3;
}

.pages__item-title {
    text-align: center;
}

.text_style_bold {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2.2rem;
}

button {
    display: block;
    box-sizing: border-box;
    width: 83vw;
    align-self: center;
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: 600;
    padding: 1.3rem .5rem;
    margin: .8rem auto 0;
}

div{
	display: block;
}


.hidden {
    display: none;
}

/* @media screen and( max-width: 400px) {
	
} */

@media (min-width: 480px) and (orientation: portrait)
html {
    font-size: 15px;
}

@media (min-width: 425px)
html {
    font-size: 12px;
}

@media (min-width: 375px)
html {
    font-size: 11px;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="style.css">
    <title>КвизТестОпросник</title>
</head>
<body>
<div class="container">
 <header></header>
 <div class="pages">
    
    <form class="pages_body" action="#" id="submitForm">
	<p class="pages__text text text_style_regular">
	Крупнейшая сеть знакомств в интернете!
	<br> Сейчас на сайте много свободных
	<br class="for-mobile"> женщин и мужчин
	</p>
	
	<div id="38" class="pages__item js-current-page">
	<h2 class="pages__item-title text text_style_bold">
	Какой тип отношений 
	<br class="for-mobile"> Вы ищете?
	</h2>
    <div id="div1" class="">
        <button class="0">Первая кнопка</button>
        <button class="1">Вторая кнопка</button>
    </div>
    <div id="div2" class="hidden">
        <button class="2">Третья кнопка</button>
        <button class="3">Четвёртая кнопка</button>
    </div>
    <input type="submit" value="Отправить" class="hidden" id="submit">
	</div>
    </form>
	
 </div>
</div>
    <scri


Вот ещё ссылка на песочницу https://jsfiddle.net/3z52kdsa/4/
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
Потому что медиа стили надо заключить в фигурные скобки:

@media (min-width: 480px) and (orientation: portrait) {
    html {
        font-size: 15px;
    }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Anonymous24
@Anonymous24
Понедельник, это как вторник, но только вчера.
я так пишу scss
html {
    font-size: 10px;
    display: block;
    @media (min-width: 768px) {
        font-size: 15px;
    }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы