Задать вопрос

Dmitry Abu

Мне только спросить
Ответы

  • Какой нужен для планшетов media запрос?

    @Abu2002
    Мне только спросить
    1
    Синтаксис @media
    media тип_устройства оператор (опции) {
    ...
    }

    Где тип_устройства может принимать следующие значения:

    all Все устройства
    print Принтеры
    screen Экраны компьютеров, планшеты, смартфоны
    speech Речевые браузеры
    Операторы:

    and Логическое И
    or или , Логическое ИЛИ
    not Логическое отрицание
    only Скрывает правило media от старых браузеров
    Опции:

    aspect-ratio, min-aspect-ratio, max-aspect-ratio Отношение ширины и высоты области просмотра
    color, min-color, max-color Количество бит на цвет для устройства
    color-index, min-color-index, max-color-index Количество цветов, которое устройство может отобразить
    device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio Соотношение сторон экрана
    device-height, min-device-height, max-device-height Вся доступная высота экрана
    device-width, min-device-width, max-device-width Вся доступная ширина экрана
    height, min-height, max-height Высота области просмотра
    width, min-width, max-width Ширина области просмотра
    orientation Положение экрана (landscape или portrait)
    resolution, min-resolution, max-resolution Разрешение экрана
    2
    Мобильные телефоны
    iPhone 5, 5S, 5C, 5 SE
    /* iPhone 5, 5S, 5C, 5 SE (портретный режим) */
    media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    ...
    }

    /* iPhone 5, 5S, 5C, 5 SE (альбомный режим) */
    media only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    ...
    }
    CSS
    iPhone 6, 6S, 7, 8, SE 2020
    /* iPhone 6, 6S, 7, 8, SE 2020 (портретный режим) */
    media only screen and (orientation: portrait) and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    ...
    }

    /* iPhone 6, 6S, 7, 8, SE 2020 (альбомный режим) */
    media only screen and (orientation: landscape) and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    ...
    }
    CSS
    iPhone 6+, 7+, 8+
    /* iPhone 6+, 7+, 8+ (портретный режим) */
    media only screen and (orientation: portrait) and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
    ...
    }

    /* iPhone 6+, 7+, 8+ (альбомный режим) */
    media only screen and (orientation: landscape) and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
    ...
    }
    CSS
    iPhone X, XS, 11 Pro, 13 mini
    /* iPhone X, XS, 11 Pro, 13 mini (портретный режим) */
    media only screen and (orientation: portrait) and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    ...
    }

    /* iPhone X, XS, 11 Pro, 13 mini (альбомный режим) */
    media only screen and (orientation: landscape) and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    ...
    }
    CSS
    iPhone XS Max, XR, 11, 11 Pro Max
    /* iPhone XS Max, XR, 11, 11 Pro Max (портретный режим) */
    media only screen and (orientation: portrait) and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3){
    ...
    }

    /* iPhone XS Max, XR, 11, 11 Pro Max (альбомный режим) */
    media only screen and (orientation: landscape) and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3){
    ...
    }
    CSS
    iPhone 12, 12 Pro, 13, 13 Pro
    /* iPhone 12, 12 Pro, 13, 13 Pro (портретный режим) */
    media only screen and (orientation: portrait) and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3){
    ...
    }

    /* iPhone 12, 12 Pro, 13, 13 Pro (альбомный режим) */
    media only screen and (orientation: landscape) and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3){
    ...
    }
    CSS
    iPhone 12 Pro Max, 13 Pro Max
    /* iPhone 12 Pro Max, 13 Pro Max (портретный режим) */
    media only screen and (orientation: portrait) and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-device-pixel-ratio: 3){
    ...
    }

    /* iPhone 12 Pro Max, 13 Pro Max (альбомный режим) */
    media only screen and (orientation: landscape) and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-device-pixel-ratio: 3){
    ...
    }
    CSS
    Samsung Galaxy S3
    /* Samsung Galaxy S3 (портретный режим) */
    media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 2){
    ...
    }

    /* Samsung Galaxy S3 (альбомный режим) */
    media only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 2){
    ...
    }
    CSS
    Samsung Galaxy S4
    /* Samsung Galaxy S4 (портретный режим) */
    media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
    ...
    }

    /* Samsung Galaxy S4 (альбомный режим) */
    media only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
    ...
    }
    CSS
    Samsung Galaxy S5
    /* Samsung Galaxy S5 (портретный режим) */
    media only screen and (orientation: portrait) and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
    ...
    }

    /* Samsung Galaxy S5 (альбомный режим) */
    media only screen and (orientation: landscape) and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
    ...
    }
    CSS
    3
    Планшеты
    4
    iPad
    /* iPad (все) */
    media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    ...
    }

    /* iPad (портретный режим) */
    media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    ...
    }

    /* iPad (альбомный режим) */
    media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    ...
    }
    CSS
    5
    Десктопы
    Только настольные компьютеры
    /* Только десктопы */
    media (min-width: 1025px) {
    ...
    }
    CSS
    Только большие экраны
    /* Только большие экраны */
    media only screen and (min-width : 1824px) {
    ...
    }
    Ответ написан
    Комментировать
    Комментировать

  • Как называются изображения такого типа?

    @Abu2002
    Мне только спросить
    Паттерн
    Примеры тут
    Ответ написан
    Комментировать
    Комментировать

  • Как получить className внутри функции click?

    @Abu2002 Автор вопроса
    Мне только спросить
    Вот такая конструкция сработала
    $('.main-btn').click(function() {
	$('.search-description').slideToggle(100);
});

$('.main-input').hide();
$('.main-rule1').show();

$(document).on("click", function(e){
	var id_click = $(e.target).attr("class");
	$('.main-'+id_click).show();
  
  });

$('.search-description li').click(function() {
	var elems_search_description = $(this).html();
	var toRemove_za = 'За ';
	var newTarget_za = elems_search_description.replace(toRemove_za, '');
	    $(".search-large").html(newTarget_za);
		  $('.search-description').hide();
      $('.main-input').hide();
});
function clearText(thefield) {
	if (thefield.defaultValue == thefield.value) {
		thefield.value = ""
	}
}

function replaceText(thefield) {
	if (thefield.value == "") {
		thefield.value = thefield.defaultValue
	}
 }
    Ответ написан
    Комментировать
    Комментировать