Bootstrap и адаптивный сайт

@Lynatik001 · Регистрация: 28.09.2012

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

Уже сайтиков таких чисто для себя 4 сделал на бутстрапике.
Но столкнулся с проблемой оптимизации под мобильный.
С его версткой всё по идее должно быть то ок.
Но вот шрифт текста и картинки при етом не уменьшаются.

Как решить данный вопрос? А то шлак отображает из за больших картинок или кнопок и тдп.

Медиа запросы?
Если да то разчихлите по ним. Например у меня лендинг одностраничный.
картинок штук 5. Одна из них так норм привязанна к границе одного из блоков(типа рука вылазит) - и не дело когда кусок етой руки потом в этом блоке летает)) -предположу.

Сколько приблизительно надо запросов. и по каким расширениям. - так предполагаю есть самые часто юзаемые росширенния - из за большого числа данных мобилок например.
а стилей текста так вообще 2шт по идее и 1 для заголовка

@Freeze_Breeze · 07.06.2018, 22:16

Lynatik001, Для изображений есть https://getbootstrap.com/docs/4.1/content/images/
А текст Вы сами адаптируете. Используете единицы измерения em и медиа запросы на ту ширину окна устройства на которую Вам нужно.

@Raqwp · 08.06.2018, 09:34

http://bootstrap-4.ru/docs/4.1... id-options

@Lynatik001 · 08.06.2018, 17:53 **[ТС]**

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

Добавлено через 27 минут
грубо говоря мне нид сделать около 5 медиа запросиков на None (auto) 540px 720px 960px 1140px расширения.
на текст Кнопки и изображения некоторые(ибо респонсив да да буду юзать, но не всегда ведет себя правильно).

Добавлено через 3 минуты
кста у меня рука (изображение о котором говорил) как бекграунд юзается. скорее всего медиа запросамы ее затыкаю.

@Freeze_Breeze · 08.06.2018, 22:44

Lynatik001, если картинка бекграундом установлена, тогда используй background-size: cover; bakcground-position: center, center; и для справочки почитай про background-image, если ты уже четыре сайта сделал.

@Lynatik001 · 10.06.2018, 02:40 **[ТС]**

ну я

CSS
1
bakcground-position: center, center;

и так юзал)). Просто думал еще чего толкового насоветуют).

@SiarheiSiarhei · 10.06.2018, 07:48

А, че - не понятно..
откуда сие..

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

около 5 медиа запросиков на None (auto) 540px 720px 960px 1140px расширения.

1280 и 1024, 800 и 480 - и все... И забудь про em=px и т.д. есть - %, vw, vh... на этих, в этих РХ..

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@Lynatik001 48 / 40 / 15 Регистрация: 28.09.2012 Сообщений: 818

	Bootstrap и адаптивный сайт 07.06.2018, 20:16. Показов 1416. Ответов 6 Метки нет (Все метки) Уже сайтиков таких чисто для себя 4 сделал на бутстрапике. Но столкнулся с проблемой оптимизации под мобильный. С его версткой всё по идее должно быть то ок. Но вот шрифт текста и картинки при етом не уменьшаются. Как решить данный вопрос? А то шлак отображает из за больших картинок или кнопок и тдп. Медиа запросы? Если да то разчихлите по ним. Например у меня лендинг одностраничный. картинок штук 5. Одна из них так норм привязанна к границе одного из блоков(типа рука вылазит) - и не дело когда кусок етой руки потом в этом блоке летает)) -предположу. Сколько приблизительно надо запросов. и по каким расширениям. - так предполагаю есть самые часто юзаемые росширенния - из за большого числа данных мобилок например. а стилей текста так вообще 2шт по идее и 1 для заголовка 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	07.06.2018, 22:16
	Lynatik001, Для изображений есть https://getbootstrap.com/docs/4.1/content/images/ А текст Вы сами адаптируете. Используете единицы измерения `em` и медиа запросы на ту ширину окна устройства на которую Вам нужно. 1

@Raqwp 28 / 28 / 12 Регистрация: 30.03.2018 Сообщений: 129
	08.06.2018, 09:34
	http://bootstrap-4.ru/docs/4.1... id-options 1

@Lynatik001 48 / 40 / 15 Регистрация: 28.09.2012 Сообщений: 818
	08.06.2018, 17:53 [ТС]
	мм дельные советы пасиб Добавлено через 27 минут грубо говоря мне нид сделать около 5 медиа запросиков на None (auto) 540px 720px 960px 1140px расширения. на текст Кнопки и изображения некоторые(ибо респонсив да да буду юзать, но не всегда ведет себя правильно). Добавлено через 3 минуты кста у меня рука (изображение о котором говорил) как бекграунд юзается. скорее всего медиа запросамы ее затыкаю. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	08.06.2018, 22:44
	Lynatik001, если картинка бекграундом установлена, тогда используй `background-size: cover; bakcground-position: center, center;` и для справочки почитай про background-image, если ты уже четыре сайта сделал. 0