Медиа запросы и отображение изображений

[P0jar]

Доброго. Дабы не засорять форум темами свои, все вопросы напишу здесь:
 
1. Медиа запросы. Как это работает? То есть, есть экран смартфона 1280х720 и монитор 1980х1080. 
Могу ли я сделать медиа-запрос так что бы при открытии страницы с устройства с шириной экрана меньше 720 загружалось изображение одного разрешения, а если больше - другое? 
 
2.

 

 

Я работаю с Bootstrap, который блок с контентом делает адаптивным. Разве внутри этого блока ещё один блок с изображением не делается тоже адаптивным? Самое главное, что в настольном браузере, в режиме эмуляции всё отлично отображается. А на практике одни косяки.  Как сделать так, что бы изображение чётко адаптировалось и не вылазило за пределы блока? 

 

3. Почему может не загружатся изображение бэкграунда? 

 

Посоветуйте, пожалуйста, хорошее руководство по оптимизации уже сделанного под смартфоны и планшеты. 

Edited January 4, 2016 by P0jar

[Igor Schnaider]

Могу ли я сделать медиа-запрос так что бы при открытии страницы с устройства с шириной экрана меньше 720 загружалось изображение одного разрешения, а если больше - другое?

 

 

Можно менять background-image.

 

Или использовать <picture> с аттрибутами srcset и sizes, но тут только новые браузеры.

[abrahadabra]

Я работаю с Bootstrap, который блок с контентом делает адаптивным. Разве внутри этого блока ещё один блок с изображением не делается тоже адаптивным? Самое главное, что в настольном браузере, в режиме эмуляции всё отлично отображается. А на практике одни косяки.  Как сделать так, что бы изображение чётко адаптировалось и не вылазило за пределы блока? 

Лучше код покажите. Но в порядке догадки: стоит изображению добавить класс img-responsive

[P0jar]

Лучше код покажите. Но в порядке догадки: стоит изображению добавить класс img-responsive

http://cssdeck.com/labs/zgaxlumyВот код здесь. С медиа-запросом там всё намудрено, просто там изображение, которое при сжатии нормально выглядит и я думал, что можно будет обойтись без подгрузки другого при смене разрешения. Поэтому медиа-запрос там, в принципе, не рабочий. 

Можно менять background-image.   Или использовать с аттрибутами srcset и sizes, но тут только новые браузеры.

То есть? background-img это блоку div, в котором изображение, добавить как бы фоновое изображение, вместо того, что бы вставлять в этот блок <img> ?

 

Спасибо. Про <picture> почитаю. Да я, в принципе, и ориентирован на Хромы и Мозилы только. А что с мобильными браузерами? Должно эту систему поддерживать? 

[ShumNo]

Лично я считаю, что это редкий геморрой как с <picture> так  и картинки пихать в background чтобы их можно было подменять медиазапросами*

img {width:100%; height:auto;}

Не думаю, что экономия трафика пользователя стоит такого кол-ва проблем для разработчика - пользователь все равно не оценит такую заботу.

 

*для 99% процентов сайтов

[abrahadabra]

действительно намудрено. Можно же проще: http://cssdeck.com/labs/efsuperi

[Igor Schnaider]

То есть? background-img это блоку div, в котором изображение, добавить как бы фоновое изображение, вместо того, что бы вставлять в этот блок ?

 

 

Да

 

А что с мобильными браузерами? Должно эту систему поддерживать? 

 

 

Тык. Можно еще, конечно, picturefill использовать :-)

[P0jar]

Спасибо всем огромнейшее. Видимо, из-за малого кол-ва постов возможности повысить репутацию нету =(

 

действительно намудрено. Можно же проще: http://cssdeck.com/labs/efsuperi

Спасибо. То есть, что там происходит при min-width: 760px ? 

 

Не думаю, что экономия трафика пользователя стоит такого кол-ва проблем для разработчика - пользователь все равно не оценит такую заботу.

 

*для 99% процентов сайтов

Я согласен. Да меня больше интересует то, что бы это отображалось внутри основного блока div, а не вылазило за его пределы в мобильных разрешениях. А оптимизацию я в фотошопе попросту с картинками провёл. 

[abrahadabra]

что там происходит при min-width: 760px ?

 

нижний отступ появляется

[P0jar]

Ребята, а почему может не отображаться бэкграунд сайта? Что нужно добавить ещё? 

http://cssdeck.com/labs/jqvgvju3

 

В некоторых моб. браузерах вместо этого только background-color работает. 

[P0jar]

Ещё один вопрос. А можно ли что-то сделать с кнопками? На лоу разрешениях с ними совсем всё печально. Текст выходит за пределы кнопок. Интересно, а можно ли создать что-то вроде медиа-зпроса для кнопок? Что бы при низких разрешениях выводилось просто ссылка с псевдокласами вместо кнопки? 

[abrahadabra]

медиа-запросы для чего угодно можно делать, в том числе и для кнопок.

[P0jar]

действительно намудрено. Можно же проще: http://cssdeck.com/labs/efsuperi

C изображением этот класс очень помог. Спасибо большое. Единственное, что теперь в широкой версии, когда доступно много места, изображение не центрируется, как должно. То есть, когда оно занимает всю доступную ширину - всё хорошо, но когда по бокам есть место - оно не центрируется, а привязано к правому краю. Выходит, text-align:center к блоку в котором изображение попросту игнорируется.  Как это можно исправить? 

[abrahadabra]

так? Edited January 5, 2016 by abrahadabra

[P0jar]

Да, спасибо большое. А нету ли у вас в закромах часом годного материала о медиа-запросах? Пробовал с подключением JS библиотеки, но слишком муторно и не работает. Думаю, в моей ситуации вариант с медиа-запросами самый оптимальный. Кнопки - это всегда проблема на маленьких разрешениях. Там чисто логически понятно, что ничего ты им не сделаешь... 

[abrahadabra]

Ну почему же? Всё делается.
Про медиа-запросы например вот: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Но раз уж вы используете бутстрап, то вот: http://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpointsи вот: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
 
Обратите внимание на миксины media-breakpoint-шотатам. Если их использовать, то получается весьма гибко и удобно. Сами значения граничных точек задаются здесь: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss, начиная со 102 строки.