Чи можлива адаптивна верстка під будь-яку роздільну здатність екрану
@Deodatuss а ширина, падінги, маргіни у вас у відсотках?
@malinkin ні, все в пікселях, щоб pixel perfect.
@Deodatuss malinkin а pixel perfect необхідний тільки для певних розширень?
@malinkin Deodatuss неа, замовник додається до всіх дозволів. Включає плагін поверх сторінки та дивиться. Розбіжність максимум 5 пікселів дозволено. Знав би спочатку, не брався б :)
@Deodatuss malinkin спираючись на мій понад убогій досвід тут 2 рішення, або штампувати гору медіазапитів і робити все фіксовано як і раніше, або конвертувати абсолютно всі фіксовані величини в пікселях у відсотки з максимальною кількістю цифр після коми. Я вибрав би другий метод, бо відсотки якщо за методом правильно порахувати то від фіксованого відрізнятимуться не буде
@malinkin Deodatuss ну от і я про те ж, мабуть купа медіа запитів єдиний вихід, тому що 12 сторінок у кожній по 4 стани переробляти ну ваще не айс. Просто хотів би пораду на майбутнє отримати як уникнути такого.
@Deodatuss malinkin відсотки наше все. ну або заборонити решту дозволів екрану через max,min width і через meta ))
@Deodatuss malinkin може стати в нагоді книжка, невелика Бен Фрейн - HTML5 і CSS3. Розробка сайтів для будь-яких браузерів та пристроїв - 2014
@malinkin Deodatuss дякую за книжку, почитаю :)
@yulsonka Взагалі pixel perfect і адаптивність це маячня сивої кобили, звичайно. Адаптивність сама собою процентна і відносна.
Є різниця між респонсивом та адаптивністю - habrahabr.ru/post/148224/. За хорошим веб-розробка приблизно з моменту випуску третьої версії бутстрапа стала відходити відоптимізації сайту під ряд пристроїв, спираючись на популярні значення ширини: 420, 768 тощо, тому що сайт повинен виглядати добре навіть якщо взяти, вивести його на телевізійну панель і повільно зменшувати вікно браузера до 320 пікселів завширшки. Мораль у чому: приблизно це при тестуванні і робиться, вікно браузера поступово зменшуємо або навпаки йдемо від малого до великого, якщо використовуємо mobile-first підхід і скрізь, де картинка "руйнується" ставимо breakpoint за допомогою media-queries. А ось щоб не писати купу значень і мати можливість ними гнучко керувати – дуже підійде препроцесинг, де можна виносити змінну breakpointа, що дуже спрощує кодинг гарної адаптивності.
А ще я не дуже зрозуміла як ви пишете медіа запити – невже просто @media (width: 600px)? У будь-якому випадку прописується діапазон типу: @media (min-width: 480px) and (max-width:567px) і тоді зовсім вже місива бути, м'яко кажучи, не повинно для пристроїв, що лежать в цьому діапазоні ширини екрану. Можливо, це саме те, що хоч якось виправить ваше "місиво".
>>Так якщо у нас буде купа брейкпоінтів з нестандартними цифрами, то сенс їхня вина в змінні?
Вони не те щоб виносяться, просто спрощується міксином синтаксис, в змінну виноситься query і value зазвичай, тоді можна писати щось на зразок @include respond-to(max-width, 600px) замість звичайного @media (max-width: 600px) Щоразу, але тут так, питання звички, в препроцессингу органічніше виглядає випадок з інклудом.
>> Так, звичайно, вказані діапазони, але проблема в тому, що зроблено pixel perfect під 320, 480, 568, на іншому, що відрізняється хоч якось обов'язково щось їде/вилазить та інше.
Адаптивність це завжди мінімізація (!) фіксування величин, що максимально можливовикористання min-width, max-width де-не-де і то акуратно, ширина ж у пікселах не задається, задається відсоток.