Масштабирование блоков в зависимости от разрешения экрана

@Квас · Регистрация: 07.07.2014

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

Всем привет!
Я даже не знаю в каком конкретно разделе создавать эту тему:

Делаю сайт для нашей сети hl, где будут отображаться 30 игроков.

Он состоит из 30 блоков, изображения которых будут постоянно меняться, и тут я столкнулся с проблемой масштабируемости страницы. Хотелось бы, чтобы эти блоки целиком входили в экраны мониторов с любым разрешением, перемещаясь по невидимой сетке (думаю, это именно так реализуется?) и не меняя своего размера.
***Основная задача - это чтобы не появлялось горизонтального лифта прокрутки страницы ни на одном экране.
Т.е. например, в телефоне они идут в два столбика под шапкой (заголовком сайта), а на экранах 1600*1200, 1920*1440, 2048*1536 (и больше) их уже будет по 6 штук в строке.

Подскажите сложно ли это реализовать или дело за малым?
Буду рад любым ссылкам и пояснениям.

Сейчас это выглядит вот так: http://halvamaster.xhc.ru/#half.html

Заранее благодарен всем откликнувшимся!

@vovandr · 07.07.2014, 22:35

Размеры блоков какие?

Добавлено через 17 минут
Самый простой способ:

HTML5
1
2
3
4
5
6
 <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    ...до 30
  </div>

CSS
1
2
3
4
5
6
7
8
9
10
.row{
  text-align: center;
}
.col{
  width: 200px;
  height: 100px;
  background: skyblue;
  margin: 20px;
  display: inline-block;
}

@Квас · 07.07.2014, 23:35 **[ТС]**

Размеры блоков 200x120 px
vovandr, а куда именно вставлять эти коды?

У меня несколько файлов:
half.html
index.html
styles_center.css
styles_topcenter.css
styles_topleft.css

И между какими строчками в тексте?
Я с кодами не особо знаком, всё интуитивно методом тыка делал в редакторе
Спасибо

@vovandr · 07.07.2014, 23:39

Разметку в html файл, а стили в один из файлов со стилями. Я не могу знать какой именно из файло со стилями подлключен к нужной странице)

@Amestigon · 07.07.2014, 23:40

Вот еще способ все больше набирающий популярность в последнее время. Суть в использовании @media screen. Но вертикальная полоса прокрутки конечно будет. Да и размеры блоков в этом примере слегка меняются, но только для того, что бы заполненность экрана была бы более полной.

@vovandr · 07.07.2014, 23:43

Amestigon способ хорош в случае, когда блоки не фиксированного размера, а в данном случае лишнии медиа запросы просто не нужны

@Квас · 08.07.2014, 00:18 **[ТС]**

У меня не получается. Я и в конец копировал и в начало, во все css
Ребят, если это не хлопотно - может вы мне засунете эти коды в файлы сами, а я сравнивая с исходником всё пойму или так не получится?
В архиве он 24 кб весит

Добавлено через 17 минут
В любом случае спасибо, постараюсь добиться результата. Вы мне подарили надежду)

@Amestigon · 08.07.2014, 00:27

Сообщение от Квас

У меня не получается. Я и в конец копировал и в начало, во все css

Ну для начала выложи код файла index.html, а там посмотрим. Это если мы говорим о главной странице. Либо half.html, если эта разметка нужна для второй страницы. Я ведь так понимаю, что пока сайт состоит из двух страниц.

@Квас · 08.07.2014, 16:38 **[ТС]**

Да, разметка нужна только для одной страницы half.htm код которой не вставляется - пишет "Вы ввели слишком длинный текст (24051 символов). Пожалуйста, сократите его до 20000 символов".

попытался загрузить файлом - пишет "half.txt:
Ваш файл занимает 23.4 Кб байт, что превышает предел на форуме в 20.0 Кб для этого типа файла".

Заливаю на ргхост:
http://rghost.ru/download/priv... 5/half.txt

Надеюсь всё правильно

@Amestigon · 08.07.2014, 16:52

На самом деле я невнимательно первое сообщение посмотрел. Там же ссылка на страницу уже есть.
А в будущем, если хочешь свой код продемонстрировать, вставляй его в теги окна сообщения. Код из html файла в тег HTML, css соответственно в CSS ну и так далее.
По теме пока ответить не смогу. Только после работы могу посмотреть повнимательнее.

@Квас · 08.07.2014, 17:08 **[ТС]**

Amestigon, хорошо, спасибо!

А то я второй день хтмл мануал читаю и до сих пор туплю(

@Amestigon · 08.07.2014, 19:42

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

@Квас · 08.07.2014, 19:48 **[ТС]**

Жаль, но всё равно спасибо)

А вообще, если с нуля по уму делать - это сколько примерно времени займет у профессионала?
И сколько такая работа может стоить?

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Квас 16 / 16 / 7 Регистрация: 07.07.2014 Сообщений: 228

	Масштабирование блоков в зависимости от разрешения экрана 07.07.2014, 21:58. Показов 10087. Ответов 12 Метки нет (Все метки) Всем привет! Я даже не знаю в каком конкретно разделе создавать эту тему: Делаю сайт для нашей сети hl, где будут отображаться 30 игроков. Он состоит из 30 блоков, изображения которых будут постоянно меняться, и тут я столкнулся с проблемой масштабируемости страницы. Хотелось бы, чтобы эти блоки целиком входили в экраны мониторов с любым разрешением, перемещаясь по невидимой сетке (думаю, это именно так реализуется?) и не меняя своего размера. **Основная задача - это чтобы не появлялось горизонтального лифта прокрутки страницы ни на одном экране. Т.е. например, в телефоне они идут в два столбика под шапкой (заголовком сайта), а на экранах 16001200, 19201440, 20481536 (и больше) их уже будет по 6 штук в строке. Подскажите сложно ли это реализовать или дело за малым? Буду рад любым ссылкам и пояснениям. Сейчас это выглядит вот так: http://halvamaster.xhc.ru/#half.html Заранее благодарен всем откликнувшимся! 0

@Квас 16 / 16 / 7 Регистрация: 07.07.2014 Сообщений: 228
	07.07.2014, 23:35 [ТС]
	Размеры блоков 200x120 px vovandr, а куда именно вставлять эти коды? У меня несколько файлов: half.html index.html styles_center.css styles_topcenter.css styles_topleft.css И между какими строчками в тексте? Я с кодами не особо знаком, всё интуитивно методом тыка делал в редакторе Спасибо 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	07.07.2014, 23:39
	Разметку в html файл, а стили в один из файлов со стилями. Я не могу знать какой именно из файло со стилями подлключен к нужной странице) 0

@Amestigon 33 / 32 / 15 Регистрация: 12.06.2014 Сообщений: 119
	07.07.2014, 23:40
	Вот еще способ все больше набирающий популярность в последнее время. Суть в использовании @media screen. Но вертикальная полоса прокрутки конечно будет. Да и размеры блоков в этом примере слегка меняются, но только для того, что бы заполненность экрана была бы более полной. 1

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	07.07.2014, 23:43
	Amestigon способ хорош в случае, когда блоки не фиксированного размера, а в данном случае лишнии медиа запросы просто не нужны 0

@Квас 16 / 16 / 7 Регистрация: 07.07.2014 Сообщений: 228
	08.07.2014, 00:18 [ТС]
	У меня не получается. Я и в конец копировал и в начало, во все css Ребят, если это не хлопотно - может вы мне засунете эти коды в файлы сами, а я сравнивая с исходником всё пойму или так не получится? В архиве он 24 кб весит Добавлено через 17 минут В любом случае спасибо, постараюсь добиться результата. Вы мне подарили надежду) 0

@Квас 16 / 16 / 7 Регистрация: 07.07.2014 Сообщений: 228
	08.07.2014, 16:38 [ТС]
	Да, разметка нужна только для одной страницы half.htm код которой не вставляется - пишет "Вы ввели слишком длинный текст (24051 символов). Пожалуйста, сократите его до 20000 символов". попытался загрузить файлом - пишет "half.txt: Ваш файл занимает 23.4 Кб байт, что превышает предел на форуме в 20.0 Кб для этого типа файла". Заливаю на ргхост: http://rghost.ru/download/priv... 5/half.txt Надеюсь всё правильно 0

@Amestigon 33 / 32 / 15 Регистрация: 12.06.2014 Сообщений: 119
	08.07.2014, 16:52
	На самом деле я невнимательно первое сообщение посмотрел. Там же ссылка на страницу уже есть. А в будущем, если хочешь свой код продемонстрировать, вставляй его в теги окна сообщения. Код из html файла в тег HTML, css соответственно в CSS ну и так далее. По теме пока ответить не смогу. Только после работы могу посмотреть повнимательнее. 0

@Квас 16 / 16 / 7 Регистрация: 07.07.2014 Сообщений: 228
	08.07.2014, 17:08 [ТС]
	Amestigon, хорошо, спасибо! А то я второй день хтмл мануал читаю и до сих пор туплю( 0

@Amestigon 33 / 32 / 15 Регистрация: 12.06.2014 Сообщений: 119
	08.07.2014, 19:42
	Насколько я понял вывод и стили сетки осуществляются скриптами. И там все очень сурово. Все задано абсолютным позиционированием. Просто добавить несколько строк в стили не получиться. Нужно переписывать скрипты. А я в них увы не силен. Сожалею, что не могу помочь. 0

@Квас 16 / 16 / 7 Регистрация: 07.07.2014 Сообщений: 228
	08.07.2014, 19:48 [ТС]
	Жаль, но всё равно спасибо) А вообще, если с нуля по уму делать - это сколько примерно времени займет у профессионала? И сколько такая работа может стоить? 0