Средства адаптивной вёрстки макета

@marketarea · Регистрация: 11.06.2016

Студворк — интернет-сервис помощи студентам

Посмотрите пожалуйста, вот к примеру чать "сверстаного шаблона" который хочется чтобы был адаптивным на 100%.
Я так понял для Респонис верстки дожно быть:
1. Viewport
2. Относительная ширина в процентах для блоков и картинок
3.

CSS
1
2
3
 * {
    box-sizing: border-box;
}

4. media запросы

У меня вроде все есть, но при сужении окошка браузера полная лажа, а при просмотре через инструменты разработчика - лучше. Особенная лажа когда добавляю:

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

Я понимаю что там все не совсем хорошо, но скажите что)? если можно по полной меня завалите всем что не то, мне так доходчивей).

И нужно ли:
1.прописывать для каждого разрешения свои стили через viewport или можно для тесктопного а все что меньше (как щас у меня) то блаблабла.
2. Шрифты, эти блин шрифты, как сделать чтобы они автоматом правильно маштабировались?? неужели нужно для каждого разрешения и тд прописывать свои стили для них??

@mrtoxas · 27.07.2016, 13:55

1. да
2. или в процентах, или в px, но со стилем max-width
3. по конкретной необходимости
4. в основном, да
5. те стили, которые должны меняться, задаете в медиа-запросах.
6. шрифты у вас и масштабируются. Посмотрите размер шрифта на вкладке Computed в инструментах разработчика, при разной ширине экрана. Через те же медиа-запросы можно указать размер для каждого экрана.

@marketarea · 27.07.2016, 14:18 **[ТС]**

Тогда почему происходит вот такое как на крине снизу?
А когда добавляю тег:

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

хаос в инструментах разработчика и как хочу при ресайзе окна.

@mrtoxas · 27.07.2016, 14:58

Добавьте и посмотрите

CSS
1
2
3
4
5
@media only screen and (max-width: 900px){
#home > p{
   font-size:1em;
   }
}

@marketarea · 27.07.2016, 16:08 **[ТС]**

это означает что я делаю все правильно и мне нужно просто прописать media запросы+правельные для них стили, для всех необходимых экранов/разрешений?

без медиа запросов нереально сделать все стили авто адаптированными?

@mrtoxas · 27.07.2016, 16:10

В вашем случае, я не вижу такой возможности.

@marketarea · 27.07.2016, 16:11 **[ТС]**

значит писать media запросы?

@mrtoxas · 27.07.2016, 16:12

Не стоит их бояться, они призваны помочь, а не усложнить

@marketarea · 27.07.2016, 16:18 **[ТС]**

ну, молодой и наивный, думал есть возможность сделать все резиновое + в медиа запросах прописать просто поведение блоков при разных экранах/устройствах а все остальное будет само маштабироватся...

)
ошибался, видать наука еще не дошла до такого)

и еще, вот здесь http://www.w3schools.com/css/css_rwd_viewport.asp указано что вюпорт "This was not perfect!! But a quick fix." означает ли это что лучше его вобще не использовать а ппросто прописывать медиа запросы?

И что кроме горизонтальной прокрутки и увеличении/уменьшении(маштабировании) дает ышеуказаная строка?

спасибо !

@mrtoxas · 27.07.2016, 16:22

Если вы не укажете тег вьюпорт, то следующей вашей темой тут будет "Почему не работают медиазапросы на мобильных устройствах?"

@marketarea · 27.07.2016, 16:23 **[ТС]**

тоесть без вюпорта, просто неработают медиазапросы??)))
незнал, упустил...

@Fedor92 · 27.07.2016, 16:25

Сообщение от mrtoxas

Если вы не укажете тег вьюпорт, то следующей вашей темой тут будет "Почему не работают медиазапросы на мобильных устройствах?"

А как медиазапросы связаны с вьюпортом?

Хех, меня с вопросом ТС опередил...

@mrtoxas · 27.07.2016, 16:40

Косвенно. Например, если страница сверстана под mobile-first (это я сейчас даже проверил), то при мобильной ширине, будут учитываться стили большего разрешения.

@marketarea · 27.07.2016, 16:42 **[ТС]**

Сообщение от mrtoxas

если страница сверстана под mobile-first

у меня она сверстана под мобайл ферст или нет? старался делать так но незнаю правельно ли понял смысл..

@mrtoxas · 27.07.2016, 17:02

У вас она сверстана под mobile last. Т.е. начала вы создавали стили для десктопной версии и потом уже начали думать про уменьшение ширины и как страница будет смотреться на мобильных.
Верстка mobile first начинается для наименьшей ширины экрана и потом уже, в процессе, добавляются стили для более широких экранов.

@marketarea · 27.07.2016, 17:10 **[ТС]**

Сообщение от mrtoxas

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

тоесть начинать с медиазапросов и и менно медиазапроса под наименьший экран?

Или верстать без медиазапроса но для наименьшего экрана?
а потом где нужно добавлять медиазапросы с учетом увеличения экрана..?

Скиньте плз хороший пример где я увижу что это сделано правельно.
спс.

@mrtoxas · 27.07.2016, 17:42

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

Добавлено через 9 минут

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.block{
    height: 200px;
    width: 200px;
    background-color: green;
}
 
@media (min-width: 300px){
    .block{
        height: 300px;
        width: 300px;
        background-color: red;
    }
}
@media (min-width: 600px){
    .block{
        width: 400px;
        background-color: blue;
    }
}

HTML5
1
<div class="block"></div>

@marketarea · 27.07.2016, 17:55 **[ТС]**

Сообщение от mrtoxas

то сначала верстается без медиазапросов

Для самого маленького экрана?
для всех сразу же не сверстать..

Сообщение от mrtoxas

Потом, при помощи них вы будете переводить стили для более широких экранов

тоесть:
1. верстаю для самого мальенького устройства/экрана
2. С помощю media запросами для нужного разрешения, добавляю контент/меняю отображение стилей.

И вот тут вопрос, ну написал я стили для 320*568 портрет.
А потом сразу медиазапросами бомбить 375*667, 414*736 и тд? а ещеж и ландшафтное отображение есть и тд.

Или за счет резинового сочетания пока тянется нормально пока и нетрогаем медиа заапросы, а как только что то не устроило сразу и добавлять.?

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

@mrtoxas · 27.07.2016, 18:08

Давайте по моему примеру. Там хоть размеры и от фонаря, но доступно. Вы написали стили для экранов, ширина которых максимум 299px. Потом добавляете, если нужно, запросы для экранов, ширина которых минимум 300px. и максимум 599px. и так далее. Если в самом начале представлять поведение элементов при растягивании экрана и грамотно верстать, то не так уж и много потом придется изменять стилей в медиа-запросах. И был проведен эксперимент, в ходе которого выяснилось, что на мобильных браузерах медиазапросы не работают, без вьюпорта и страница отображается со стилями десктопной версии.

@marketarea · 29.07.2016, 21:15 **[ТС]**

выставил практически все размеры в % и картинкам назначил

CSS
1
max-width:100%; height:auto;

почему при минимальных разрешениях картинки не уменьшаются и все лезит в стороны?
спс.

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	27.07.2016, 13:55
	1. да 2. или в процентах, или в px, но со стилем max-width 3. по конкретной необходимости 4. в основном, да 5. те стили, которые должны меняться, задаете в медиа-запросах. 6. шрифты у вас и масштабируются. Посмотрите размер шрифта на вкладке Computed в инструментах разработчика, при разной ширине экрана. Через те же медиа-запросы можно указать размер для каждого экрана. 0

@marketarea 8 / 0 / 2 Регистрация: 11.06.2016 Сообщений: 261
	27.07.2016, 16:08 [ТС]
	это означает что я делаю все правильно и мне нужно просто прописать media запросы+правельные для них стили, для всех необходимых экранов/разрешений? без медиа запросов нереально сделать все стили авто адаптированными? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	27.07.2016, 16:10
	В вашем случае, я не вижу такой возможности. 0

@marketarea 8 / 0 / 2 Регистрация: 11.06.2016 Сообщений: 261
	27.07.2016, 16:11 [ТС]
	значит писать media запросы? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	27.07.2016, 16:12
	Не стоит их бояться, они призваны помочь, а не усложнить 1

@marketarea 8 / 0 / 2 Регистрация: 11.06.2016 Сообщений: 261
	27.07.2016, 16:18 [ТС]
	ну, молодой и наивный, думал есть возможность сделать все резиновое + в медиа запросах прописать просто поведение блоков при разных экранах/устройствах а все остальное будет само маштабироватся...) ошибался, видать наука еще не дошла до такого) и еще, вот здесь http://www.w3schools.com/css/css_rwd_viewport.asp указано что вюпорт "This was not perfect!! But a quick fix." означает ли это что лучше его вобще не использовать а ппросто прописывать медиа запросы? И что кроме горизонтальной прокрутки и увеличении/уменьшении(маштабировании) дает ышеуказаная строка? спасибо ! 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	27.07.2016, 16:22
	Если вы не укажете тег вьюпорт, то следующей вашей темой тут будет "Почему не работают медиазапросы на мобильных устройствах?" 0

@marketarea 8 / 0 / 2 Регистрация: 11.06.2016 Сообщений: 261
	27.07.2016, 16:23 [ТС]
	тоесть без вюпорта, просто неработают медиазапросы??))) незнал, упустил... 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	27.07.2016, 16:40
	Косвенно. Например, если страница сверстана под mobile-first (это я сейчас даже проверил), то при мобильной ширине, будут учитываться стили большего разрешения. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	27.07.2016, 17:02
	У вас она сверстана под mobile last. Т.е. начала вы создавали стили для десктопной версии и потом уже начали думать про уменьшение ширины и как страница будет смотреться на мобильных. Верстка mobile first начинается для наименьшей ширины экрана и потом уже, в процессе, добавляются стили для более широких экранов. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	27.07.2016, 18:08
	Давайте по моему примеру. Там хоть размеры и от фонаря, но доступно. Вы написали стили для экранов, ширина которых максимум 299px. Потом добавляете, если нужно, запросы для экранов, ширина которых минимум 300px. и максимум 599px. и так далее. Если в самом начале представлять поведение элементов при растягивании экрана и грамотно верстать, то не так уж и много потом придется изменять стилей в медиа-запросах. И был проведен эксперимент, в ходе которого выяснилось, что на мобильных браузерах медиазапросы не работают, без вьюпорта и страница отображается со стилями десктопной версии. 0