Автоматическая подгонка макета фиксированной ширины к ширине экрана

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

Я ищу решение, чтобы сайт хорошо выглядел даже на маленьких экранах. Это должно быть возможно, потому что, если пользователь изменит уровень масштабирования браузера примерно до 75%, все будет выглядеть довольно хорошо. Но я читал, что изменение уровня масштабирования в браузере невозможно в JavaScript и что поведение этой функции неодинаково в разных браузерах.

Есть ли стандартное решение (библиотека или что-то в этом роде) для решения этой проблемы?


javascript html css responsive
person Arnaud    schedule 28.04.2016    source источник
comment
Вы можете сделать это с помощью css: w3schools.com/cssref/css3_pr_mediaquery.asp Добавить точки останова для размеров, которые вы хотите, и переопределить вас css.   -  person Petroff    schedule 28.04.2016
comment
Да, я знаю это правило, но мне пришлось бы изменить множество атрибутов CSS... нет ли решения сделать это легко и таким образом, чтобы оно работало со всеми размерами экрана, не меняя большую часть кода? Как масштабирование, реализованное в Chrome.   -  person Arnaud    schedule 28.04.2016

Ответы (2)


arrow_upward
1
arrow_downward

Вы уже поставили тег «отзывчивый» в свои теги. Это означает, что вы знаете, что вам нужен адаптивный веб-сайт.

Вы можете создавать медиазапросы для определенной ширины и устанавливать для свойства масштабирования подходящее значение (но Firefox не поддерживает это: http://caniuse.com/#search=zoom ; вы можете использовать transform: scale() в качестве запасного варианта).

ПРИМЕР:

@media (max-width: 600px) {
  body {
    zoom: 0.75;
    moz-transform: scale(0.75, 0.75);
  }
}

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

ПРИМЕР:

@media (max-width: 600px) {
  .myElement {
    width: 600px; /* whatever, maybe 100%? */
  }
}
person John Smith    schedule 28.04.2016
comment
Большой! Правило масштабирования - это то, что я искал. Я действительно думаю, что в моем случае это было лучшее решение: быстро реализовать и результат выглядит хорошо. - person Arnaud; 28.04.2016

arrow_upward
1
arrow_downward

Для начала включите этот тег meta в <head> вашей страницы:

<meta viewport="width=device-width, initial-scale=1.0">

Вышеупомянутое заставит веб-сайт масштабироваться на мобильных устройствах. Но вам нужно проделать дополнительную работу, используя медиа-запросы.

Вы можете создавать разные правила для разных размеров экрана:

@media(max-width: 768px){
    /** Small Mobile Screens */
}

@media(min-width: 768px){
    /** Large Mobile Screens, tablets e.t.c */
}

@media(min-width: 992px){
    /** Desktops, Laptops */
}

@media(min-width: 1200px){
    /** Larger Screens (Desktops, Laptops, e.t.c) */
}

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

person dimlucas    schedule 28.04.2016