резиновая верстка в scss react

Question

подскажите пожалуйста у меня есть select menu

 <div className='select'>
      <div
        className={style.select__header}
        onClick={(e) => setIsActive(!isActive)}
      >
        <span className={style.select__current}>
          <span>{isActive && <span>{selected}</span>} Author</span>
        </span>
        <div
          className={style.select__icon}
          onClick={() => clearFilterValue(select.name, select.id)}
        >
          &times;
        </div>
      </div>
      {isActive && (
        <div className={style.select__body}>
          <div className={style.select__container}>
            {select.map((item, id) => (
              <div
                className={style.select__item}
                id={id}
                onClick={() => changeAuthorValue(item.name, item.id)}
              >
                <li
                  className={style.select__itemName}
                  onClick={(e) => setIsActive(!isActive)}
                >
                  {item.name}
                </li>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>

так же стили в scss файле

.

select {
    
    position: relative;
    width: 250px;
    border-radius: 8px;

    @media screen and (width:1023px) {
        .select {
            width: 220px;
        }
    }

    @media screen and (width:767px) {
        .select {
            width: 160px;
        }
    }

    @media screen and (width:320px) {
        .select {
            width: 280px;
        }
    }
    
  

    &__header {
        border: 1px solid #ccc;
        cursor: pointer;
        display: flex;
        border-radius: 8px;
        position: relative;
        z-index: 5;
        height: 45px;
        overflow: hidden;
    }

    &__icon {
        align-items: center;
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        height: 40px;
        margin-left: auto;
        text-align: center;
        width: 40px;
        color: var(--button-text-color);
        
    }

    &__current {
        font-size: 18px;
        line-height: 24px;
        padding: 8px;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        padding-top: 15px;
        padding-left: 15px;
        color: var(--input-text-color);
    }

    &__item {
        cursor: pointer;
        font-size: 16px;
        line-height: 24px;
        padding: 8px;
        color: var(--button-text-color);
    }

    &__item:hover {
        color: #000;
    }

    &__body {
        border: 1px solid #cccccc;
        border-top: 0;
        position: absolute;
        background-color: var(--background-color);
        border-radius: 0px 0px 8px 8px;
        z-index: 10;
        height: 85px;
        width: 260px;

    }

    &__buttonBox {
        display: flex;
        column-gap: 10px;
        padding-left: 15px;
        padding-top: 15px;

    }

    &__button {
        width: 95px;
        height: 45px;
        border-radius: 8px;
        background: #EFEFEF;
        margin-top: 6px;
    }

    &__itemList {

        height: 70px;
        background-color: #EFEFEF;
        overflow-y: scroll;
        padding-top: 3px;
        border-radius: 0px 0px 8px 8px;
    }

    &__between {
        width: 16px;
        margin-top: 25px;
        color: var(--button-text-color);

    }

    &__from {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        line-height: 15px;
        padding-left: 15px;
        padding-top: 3px;
    }

    &__before {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        line-height: 15px;
        padding-left: 15px;
        padding-top: 3px;
    }

    &__itemData {
        padding-left: 10px;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
            }

}

проблема в том что медиа запрос не применяется при уменьшении разрешения экрана так же я сделал такой же медиа запрос для самого контейнера где все 4 select menu что бы при ширине экрана 320px элементы выстроились в колонку этот медиа запрос так же не применился подскажите что не так совсем не давно начал пользоватсья scss

Answer 1

.select {
    position: relative;
    width: 250px;
    border-radius: 8px;

    @media screen and (max-width:1023px) { 
            width: 220px; 
    }

    @media screen and (max-width:767px) {
            width: 160px;
    }

    @media screen and (max-width:320px) {
            width: 280px;
    }

}

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

.select {

    какие-то стили;

    @media screen and (width:1023px) {
        здесь-имя-селектора-не-нужно {
            width: 220px;
        }
}

кроме того, указывая в качестве условия для медиазапроса (width:1023px), вы применяете стили ТОЛЬКО в случае ширины экрана ровно 1023px. Лучше использовать max-width или min-width

БЛОГ НА HUSL

резиновая верстка в scss react

Ответы (1 шт):