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

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

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

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

источник

2016-04-28 Arnaud

Вы можете сделать это с помощью css: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp Добавить точки останова для требуемых размеров и переопределить css. – Petroff

Да, я знаю это правило, но мне нужно было бы изменить множество атрибутов CSS ... нет ли решения, чтобы сделать это легко и в некотором смысле, которое работает со всеми размерами экрана, не меняя большую часть кода? Как и масштаб, реализованный в Chrome. – Arnaud

'' – pawel

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

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

Пример:

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

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

Пример:

@media (max-width: 600px) { 
    .myElement { 
    width: 600px; /* whatever, maybe 100%? */ 
    } 
}

источник

2016-04-28 08:34:29

Отлично! Правило «масштабирования» - это то, что я искал. Я действительно думаю, что в моем случае это было лучшее решение: быстро реализовать, и результат выглядит хорошо. – Arnaud

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

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

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

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

@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) */ 
}

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

источник

2016-04-28 08:40:53 dimlucas

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

ответ

Смежные вопросы