Как сделать адаптивный сайт 2015-2017

[autit]

Прикинул как лучше вопросы задавать... попробую все в одной теме. 

 

Будут рассмотрены следующие темы:

• meta_name="viewport"  во всей красе
• media запросы - взгляд изнутри
• особенности мобильных браузеров - как происходит обработка-подстройка кода странички под реальный экран мобильника
• шрифт - как подстраиваться под размер экрана мобильных браузеров
• фотографии - легкие но не мелкие, с видом на будущее, retina-дисплей,
• IE хаки
• Иконка сайта

Обо мне

Верстальщик-любитель. Знания - только HTML и  CSS.

о PHP знаю только что собирается из отдельных кусков кода. 

Сервисных технологий и терминов не понимаю.

По теме адаптивной верстки прочитал довольно много. Другими словами базовые знания есть. 

Сейчас изучаю коды реальных сайтов и вижу много непонятного. 

 

 

Прошу помочь мне разобраться. 

 

 

Моя цель 

Сделать адаптивный сайт на чистом HTML и CSS, Яваскрипт собираюсь использовать только в крайнем случае (например для меню).

Сайт будет без движка. 

 

 

Интересуют следующие основные моменты:

• сайт легко сверстать вручную
• сайт должен быстро загружаться
• сайт должен быть хорошим с точки зрения SEO

 

Общий подход

Сайт далать - так делать с видом на будущее!  чтобы не пришлось через пару лет переделывать.

[afdw]

Физические пиксели, и css пиксели - я знаю что они есть, но не понял что из этого следует...

У вас с meta viewport это будет одно и тоже.

 

 

Как мобильники обрабатывают meta viewport  content=width=device-width при смене ориентации. ( или что происходит в мобильнике при смене ориентации?)

Не очень понял. при смене ориентации в мобильнике просто как будто меняется местами ширина и высота. То есть если было 100x200, то станет 200x100.

 

 

Как мобильники обрабатывают ширину изображений. 

Также, как и компьютеры.

 

 

Как мобильники обрабатывают высоту текста, (почему именно Em, и почему многие все равно пишут px). 

Также, как и компьютеры, но если текст слишком мелкий - они его увеличивают.

 

 

 

P.S.: Вот эмулятор Android, сами потестируйте: https://www.manymo.com/

Edited June 15, 2015 by afdw

[SelenIT]

У вас с meta viewport это будет одно и тоже.

Вообще-то в общем случае нет.

 

желательно ссылочки на ПРАВИЛЬНЫЕ статьи

 

Вот неплохой перевод классической статьи PPK (уже заслуженной, но всё еще актуальной): http://www.beskrovnyy.com/verstka/skaz-o-dvux-vyuportax-chast-vtoraya/

[afdw]

Вообще-то в общем случае нет.

 

Почему?

[SelenIT]

Так вот же autit целую табличку привел. device-width дает результат именно в CSS-пикселях, а сколько физических умещается в одном CSS-ном — на совести производителя девайса...

[afdw]

И нет способ сделать так, чтобы CSS-пиксели были равны физическим пикселям?

[SelenIT]

Насколько я знаю, это можно сделать, только определив конкретный девайс (напр. по User-Agent на сервере) и подсунув ему персональный meta viewport с соответствующей width. Но зачем это делать? Много ли проку от раскладки для FullHD-мониторов на телефоне?

[swandev]

Я вот тоже не понимаю зачем это, ставьте width=device-width и не думайте там о всяких физических пикселях, с каждым годом их все больше и больше будут делать в телефонах, но они будут настолько маленькие что разницы никакой не заметите, поэтому и есть такое понятие как css пиксели

[autit]

 

 

Как мобильники обрабатывают meta viewport  content=width=device-width при смене ориентации. ( или что происходит в мобильнике при смене ориентации?)

Не очень понял. при смене ориентации в мобильнике просто как будто меняется местами ширина и высота. То есть если было 100x200, то станет 200x100.

 

 

В статье есть про это, но как-то не очень ясно.

Поясню. Загрузился сайт, получил

<meta name="viewport" content="width=device-width, initial-scale=1.0">@media (min-width:320px) and (max-width:767px){.container{ width:320px;} .col{display:none}}@media (min-width:768px) and (max-width:1023px){.container{ width:768px;} .col{width:230px;}}

Мобильник был в положении портрет, загрузилась версия с одной колонкой шириной 320.  

поменяли ориентацию.

Судя по вышеприведенной статье content=width=device-width  "удерживает" вьюпорт страницы прежним и в него встраивает версию сайта с двумя колонками шириной 768.

В два раза шире... не факт что влезет в экран полностью.

Получается что то не то или я плохо понял?

 

 

 

Как мобильники обрабатывают ширину изображений. 

Также, как и компьютеры.

 

Я неправильно поставил вопрос. 

 

Какой сейчас есть простой хороший метод для Подстраиваемых изображений? 

Делаю сайт с видом на будущее. Перекраивать большое количество фотографий у меня нет желания. В будущем ретина дисплей видимо будет применяться... но судя по статье даже продвинутые в 2011 не знали к чему дело пойдет... 

 

Как   Подстраиваемые изображения  можно сделать средствами  CSS и media запросами? 

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

Ссылочку пожалуйста.

 

Ну, например такой подход я встречал 

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">@media (min-device-width:600px) {img[data-src-600px] {content: attr(data-src-600px, url);}}@media (min-device-width:800px) {img[data-src-800px] {content: attr(data-src-800px, url);}}

Желательно ссылку где упомянуто какие браузеры этот подход поддерживают. 

 

 

 

Вот неплохой перевод классической статьи PPK (уже заслуженной, но всё еще актуальной): http://www.beskrovnyy.com/verstka/skaz-o-dvux-vyuportax-chast-vtoraya/

 

 

Кое что новое для себя нашел, но старовата. Сейчас браузеры уже другие. 

 

Просьба еще несколько ссылок с современными статьями. 

 

Особенно меня интересует тема, которую поднимал выше. 

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

@media (min-width:320px) and (max-width:767px){.container{ width:320px;} .col{display:none}}@media (min-width:768px) and (max-width:1023px){.container{ width:768px;} .col{width:230px;}}Или@media (min-width:320px) and (max-width:767px){.container{width:100%;} .col{display:none}}@media (min-width:768px) and (max-width:1280px){.container{width:100%;} .col{width:23.9%;}}

 

[afdw]

Желательно ссылку где упомянуто какие браузеры этот подход поддерживают. 

 

http://caniuse.com/

  В статье есть про это, но как-то не очень ясно. Поясню. Загрузился сайт, получил@media (min-width:320px) and (max-width:767px){.container{ width:320px;} .col{display:none}} @media (min-width:768px) and (max-width:1023px){.container{ width:768px;} .col{width:230px;}} Мобильник был в положении портрет, загрузилась версия с одной колонкой шириной 320.   поменяли ориентацию. Судя по вышеприведенной статье content=width=device-width  "удерживает" вьюпорт страницы прежним и в него встраивает версию сайта с двумя колонками шириной 768. В два раза шире... не факт что влезет в экран полностью. Получается что то не то или я плохо понял?

 

Ничего там не удерживается. Ещё раз говорю, посмотрите сами в эмуляторе Android.

[swandev]

 

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

 

Очень сложно отвечать на ваши вопросы, которые все в одном большом сообщении.

@media    only screen and (-webkit-min-device-pixel-ratio: 2),    only screen and (   min--moz-device-pixel-ratio: 2),    only screen and (     -o-min-device-pixel-ratio: 2/1),    only screen and (        min-device-pixel-ratio: 2),    only screen and (                min-resolution: 192dpi),    only screen and (                min-resolution: 2dppx) {        /* */ }

Edited June 15, 2015 by swandev

[autit]

 

Желательно ссылку где упомянуто какие браузеры этот подход поддерживают. 

 

http://caniuse.com/

 

 

поддерживают не все ... 

 

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

Opera Mini  - не поддерживает  

 

UC Browser for Android   -  не поддерживает   

Blackberry Browser  -   

IE Mobile   -   

 

Значит ли это, что они понимают эту строку так -

<img src="image.jpg"  alt="">

 

Ничего там не удерживается. Ещё раз говорю, посмотрите сами в эмуляторе Android.

 

 

не работает ваш эмулятор. Пойду тестировать на реальных мобильниках.

[afdw]

не работает ваш эмулятор. Пойду тестировать на реальных мобильниках.

 

И этот?

Edited June 17, 2015 by afdw

[bryknyk]

Насколько применим http://www.android-x86.org/? Кто пользовался. есть ли отличия, неочевидные нюансы при работе браузера?

[afdw]

Нет, вот только я не нашёл, как поменять ориентацию.