Pataz

Приветствую всех участников HTML - форума ! 

Поясню вопрос более подробно, в стиле задачи из учебника   

Дано:

Адаптивная (Responsive) страница, в конце таблицы style.css прописаны @media queries под разные разрешения.

Пример:

***Main Style***

h1 {

    padding-right: 20px;

}

p { 

    margin-left: 10px;

}

@media queries (max-width: 991px) {

    h1 {

         padding-right: 10px;

   }

    p  {

        margin-left: 5px;

   }

}

@media queries (max-width: 640px) {

    p { 

        margin-left: 3px;

    }

}

Необходимо что-бы при просмотре с устройства попадающего под параметры последнего @media queries (max-width: 640px) у элемента h1 был задан атрибут padding-right со значением 10px как в предыдущем @media queries (max-width: 991px). Необходимо ли дублировать для этого стиль из одного @media queries в другой ?

Я знаю что браузер читает и применяет стили последовательно, также есть разные приоритеты. Но как обстоят дела при открытии странички с других устройств ? Сначала браузер применяет Main Styles а потом сразу применяет нужный ему @media queries или все также последовательно ?

Проще говоря кочуют ли стили из "верхних"(больших разрешений) @media queries в нижние(маленькие разрешения) или необходимо их дублировать ?