Как изменить размер всего содержимого веб-страницы, если оно превышает ширину окна браузера? (вообще не меняя позиционирHtml

Программисты Html
Ответить
Anonymous
 Как изменить размер всего содержимого веб-страницы, если оно превышает ширину окна браузера? (вообще не меняя позиционир

Сообщение Anonymous »

Возможно, это не лучший способ спросить, о чем я спрашиваю, но я не знаю, как еще это сказать.У меня есть воссозданная версия веб-сайта sega.com 1996 года. Я пытался переделать макет без использования таблиц, как раньше, и думаю, что это выглядит нормально.

Но проблема в том, что теперь, если я сожму окно браузера до ширины менее 550 пикселей. содержимое страницы просто выходит за пределы окна, что не идеально.
Поскольку макет и расположение всего на странице важны, я хотел бы сделать так, чтобы, когда ширина устройства меньше ширины страницы (550 пикселей), вся страница и ее содержимое масштабировались, чтобы соответствовать этой ширине, без изменения положения или относительных размеров контента.
Вот как выглядит сайт:
/>воссоздание веб-сайта sega.com
вот что он делает, когда его размер становится меньше его ширины:
веб-сайт sega.com выходит за границы браузера
вот примерное то, что я хочу, чтобы веб-сайт делал (сделано с помощью Ctrl + -):
веб-сайт sega.com уменьшен в маленьком окне браузера.
и вот код, весь CSS находится в html-файл:


Код: Выделить всё






Welcome to Sega Online


body {
height: 100%;
background-color: #000000;
}

.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: auto;
}

.container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
width: 550px;
}

.toprow {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
text-align: center;
}











Want to get in on the greatest video game promotion ever?[/b][b]        
[img]/sega/img/spotlight.gif[/img]

A low-cost, easy-to-use alternative to access the World Wide Web using your Sega Saturn![/b]


[img]/sega/img/buzz.gif[/img]


[img]/sega/img/centernew.gif[/img]


[img]/sega/img/games.gif[/img]



[img]/sega/img/central.gif[/img]


[img]/sega/img/recroom.gif[/img]









Я попробовал много разных методов и решений, и многие из них не сработали или не дали того эффекта, который я искал. Я также искал в Интернете, чтобы узнать, есть ли у кого-нибудь то же самое, но безуспешно.

В основном я пытался использовать гибкие поля для хранения содержимого страницы, но все всегда оставалось постоянной ширины.
P.S. У меня 0 профессионального опыта программирования, поэтому, возможно, я что-то пропустил или сделал неправильно. Не стесняйтесь предлагать лучшие способы структурирования моего кода.

Подробнее здесь: https://stackoverflow.com/questions/796 ... e-width-of
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»