Пропорциональное уменьшение всех элементов на сайте вместе с окном браузера

@xbo · Регистрация: 03.09.2018

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

Здравствуйте. Например есть сайт http://buzovy.ru/smotret/zamuz... -4-seriya/

Если начать уменьшать окно браузера, то, когда оно начинает достигать размеров элементов сайта (размеров картинок, таблиц, iframe-вставок) - они начинают пропорционально уменьшаться (или сужаться), становятся по ширине 100%, и поэтому не появляется горизонтальная полоса прокрутки на смартфонах. Думаю, что это должно делаться с помощью css, но к сожалению, не смог понять как такое сделать. Подскажите, пожалуйста, как такое можно сделать?

У меня есть сайт, и он оптимизирован под мобильные устройства, но когда вставляю видео ифреймом шириной 720px или такую же фиксированную таблицу - то на мобильных телефонах появляется горизонтальная прокрутка и выглядит не очень красиво.
Заранее благодарю за помощь.

@galawar · 20.09.2018, 19:52

Пропорциональное уменьшение всех элементов на сайте вместе с окном браузера

@xbo · 20.09.2018, 21:39 **[ТС]**

galawar, спасибо. Да, оно.

А как такое же сделать для таблицы, если есть фиксированный размер, например:

HTML5
1
2
3
4
5
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="700" id="AutoNumber1" height="360">
  <tr>
    <td width="100%">&nbsp;</td>
  </tr>
</table>

@gogolik · 21.09.2018, 08:15

xbo, перенести ширину в css, написать @media запросы, где ширина будет изменяться. Иначе никак. А лучше всего или резину, или адаптив верстать сразу, чтоб не возникало потом костылей.

@xbo · 21.09.2018, 14:48 **[ТС]**

Спасибо, gogolik

Я уже решил вопрос до того как прочел ваше сообщение, но фактически сделал так же как вы и написали

Получилось вот так:

HTML5
1
2
3
4
5
<div class="mynew-table"><table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="500" id="AutoNumber1" height="360">
  <tr>
    <td width="100%">&nbsp;</td>
  </tr>
</table></div>

CSS
1
2
3
4
5
6
7
8
9
.mynew-table {
 max-width:500px;
}
 
@media (max-width:600px) {
  table {
    width: 100%;
  }
  }

Новые блоги и статьи Все статьи Все блоги /
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 Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@xbo 0 / 0 / 0 Регистрация: 03.09.2018 Сообщений: 8

	Пропорциональное уменьшение всех элементов на сайте вместе с окном браузера 20.09.2018, 19:26. Показов 6827. Ответов 4 Метки нет (Все метки) Здравствуйте. Например есть сайт http://buzovy.ru/smotret/zamuz... -4-seriya/ Если начать уменьшать окно браузера, то, когда оно начинает достигать размеров элементов сайта (размеров картинок, таблиц, iframe-вставок) - они начинают пропорционально уменьшаться (или сужаться), становятся по ширине 100%, и поэтому не появляется горизонтальная полоса прокрутки на смартфонах. Думаю, что это должно делаться с помощью css, но к сожалению, не смог понять как такое сделать. Подскажите, пожалуйста, как такое можно сделать? У меня есть сайт, и он оптимизирован под мобильные устройства, но когда вставляю видео ифреймом шириной 720px или такую же фиксированную таблицу - то на мобильных телефонах появляется горизонтальная прокрутка и выглядит не очень красиво. Заранее благодарю за помощь. 0

@galawar 154 / 123 / 90 Регистрация: 09.04.2018 Сообщений: 351
	20.09.2018, 19:52
	1

@gogolik Супер-модератор 3954 / 2066 / 829 Регистрация: 13.03.2010 Сообщений: 6,805
	21.09.2018, 08:15
	Сообщение было отмечено xbo как решение Решение xbo, перенести ширину в css, написать @media запросы, где ширина будет изменяться. Иначе никак. А лучше всего или резину, или адаптив верстать сразу, чтоб не возникало потом костылей. 1

Пропорциональное уменьшение всех элементов на сайте вместе с окном браузера

Решение