Как изменить CSS в зависимости от размера дисплея

Question

Как изменить CSS в зависимости от размера дисплея

Я столкнулся с ситуацией, когда мне приходилось отслеживать клики на кнопке в социальных сетях, втянутой через iframe. При нажатии кнопки открывается новое окно. Вот мое решение:

var iframeClick = function () {
    var isOverIframe = false,
    windowLostBlur = function () {
        if (isOverIframe === true) {
            // DO STUFF
            isOverIframe = false;
        }
    };
    jQuery(window).focus();
    jQuery('#iframe').mouseenter(function(){
        isOverIframe = true;
        console.log(isOverIframe);
    });
    jQuery('#iframe').mouseleave(function(){
        isOverIframe = false;
        console.log(isOverIframe);
    });
    jQuery(window).blur(function () {
        windowLostBlur();
    });
};
iframeClick();

0

css media-queries

задан Kamalesh M. Talaviya 18 January 2019 в 08:56

3 ответа

Другие вопросы по тегам:

css media-queries

Похожие вопросы:

score 0 · Answer 1

Медиа-запросы в верхней части CSS нужны! Важно, чтобы переопределить медиа-запрос. Медиа-запросы внизу не нужны! Важно. Я разместил запрос сверху, поэтому я использовал! Важное, чтобы переопределить любой другой стиль после.

@media screen and (max-width: 500px) {
.left__img2 {
width: 10px !important;
} 
}

* {
box-sizing: border-box;
} 

body, html {
background: #fff;
height: 100%;
margin: 10px;
}

.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px; 
}

score 0 · Answer 2

Я думаю, что это сработает.

@media screen and (max-width: 500px) {
.left__img2 {
    max-width: 10px;
} 
}

0

ответ дан tdrsam 18 January 2019 в 08:56

score 0 · Answer 3

Ваш код хорошо работает в следующем примере (измените размер вашего окна) , возможно, это происходит из-за побочного эффекта остальной части вашего кода, можете ли вы показать нам остальную часть вашего кода?

.left__img2 {
    position: absolute;
    float: left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border-radius: 20px;
    width: 600px;
    height: 400px; 
    background-color: red;
} 


@media screen and (max-width: 500px) {
.left__img2 {
    width: 10px;
    background-color: yellow;
}

<div class="left__img2"><div>