Веб-страница с различными разрешениями

Question

Я студент первого курса по разработке программного обеспечения, и у меня есть задание сделать веб-страницу. Это не сложно, но после написания веб-страницы я понял, что при открытии сайта с меньшим разрешением (чем у моего 1080p) устройство не очень хорошо вписывается. Я не знаю, какая резолюция использует учитель, который будет оценивать меня, поэтому я хочу изменить сайт на 1600: 900 и 1336: 768. Я должен сказать, что я использовал другие предложения, чтобы я разделил теги div на% не на пиксели, но он все еще не работает. Я столкнулся с проблемой, и я думаю, что нашел решение - на самом деле это что-то с помощью @media, где вы можете установить разные проценты для разных разрешений экрана заранее, а затем получить разрешение экрана в клиенте и открыть его в соответствующих пропорциях.

Поэтому я хотел спросить вас, как именно написать это? P.s вы можете взглянуть на мою веб-страницу here

Answer 1

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

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

Когда вы начинаете определять размеры с абсолютными/статическими размерами пикселей, вы попадаете в ситуации, когда вещи больше не подходят.

Обычно вы должны избегать создания конструкций, которые являются фиксированными размерами пикселей, и позволяют элементам изменять размер, естественно, по мере того, как HTML предназначен для выполнения.

---

@media запросы подходят для изменения выступлений в конкретных резолюциях, и, как правило, созданы, чтобы сделать «отзывчивую» конструкцию, где элементы могут изменить стиль или быть скрыты/показаны при различных разрешениях. Обычно это используется для более сложных или динамических макетов, и по-прежнему их необходимо планировать соответственно, потому что он обычно настроен для размещения диапазона разрешений. Например, элемент может быть на 100% шириной от 0 до 1024 пикселей в ширину и становиться на 50% шириной, если окно превышает 1024 пикселя в ширину.

---

В случае вашего веб-сайта вы как бы разбиваете его, плавая все оставленное. float имеет тенденцию к чрезмерному использованию в CSS без понимания его побочных эффектов.

Удалить width из вашего menu элемента, и удалить width и float от вашего content элемента.

Это приведет к тому, что меню будет располагаться так же широко, как его содержимое (кнопки) и «плавать» рядом с содержимым, которое будет стремиться быть на 100% шире, но сужаться, чтобы меню располагалось рядом с ним ,

Answer 2

Удачи вам в школе вам нужно будет прочитать на дизайне responsive, который вы используете через CSS. например.

@media screen and (min-width: 500px) { 
    // Write your style 
} 
@media screen and (min-width: 501px){ 
    // Write your style 
} 

Это то, что вам нужно сделать, есть много документации и руководств по этому у вас не будет никаких проблем с поиском ресурсов.

Адрес TutsPlus, чтобы вы начали: Tutorial link