Truy vấn phương tiện ưa thích với một số LESS Magic

Sẽ rất tốt nếu bạn bọc các kiểu css cho các độ phân giải khác nhau trong một số lớp css sử dụng ít hơn.

Tôi muốn làm điều gì đó như:

footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}

Ở cuối một cái gì đó như thế này sẽ là kết quả:

footer {
  width: 100%;
}

@media screen and (min-width: 768px) {
  footer {
    width: 768px;
  }
}

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

.tablet có thể trông giống như thế này:

@media screen and (min-width: 768px) {
  .tablet {

  }
}

Hy vọng ai đó có một ý tưởng hay!

Đây là những gì tôi đã làm trong các dự án của mình:

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

@media @desktop {
  footer {
    width: 940px;
  }
}

@media @tablet {
  footer {
    width: 768px;
  }
}

Điều này cho phép bạn chỉ xác định các truy vấn phương tiện của mình một lần và bạn có thể sử dụng nó trên các tệp ít hơn của mình. Cũng dễ đọc hơn một chút. :)

Tôi hoàn toàn đồng ý với câu trả lời của Hải Nguyễn (đã được chấp nhận) nhưng bạn có thể làm rõ hơn một chút bằng cách làm như sau:

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

footer{
  width: 100%;
  @media @tablet {
    width: 768px;
  }
  @media @desktop {
    width: 940px;
  }
}

Về cơ bản nó giống nhau nhưng cho phép bạn lồng các truy vấn phương tiện của mình vào bên trong bộ chọn ban đầu. Nó giữ tất cả css cho một phần tử cụ thể lại với nhau và làm cho phong cách của bạn trở nên mô-đun hơn nhiều (so với cách tiếp cận điểm ngắt phân tách).

+1 cho Nguyen và Yancey - và một phần bổ sung nữa.

Nếu bạn muốn định nghĩa rõ ràng về độ rộng, bạn có thể thực hiện điều đó với string interpolationvà các biến cho điểm ngắt của mình. Ví dụ ở đây với những người của bootstrap - các quy tắc nghiêm ngặt là để ngăn chặn việc chồng chéo định nghĩa.

@screen-xs-min:     480px;
@screen-sm-min:     768px;
@screen-md-min:     992px;
@screen-lg-min:     1200px;

@screen-xs-max:     (@screen-sm-min - 1);
@screen-sm-max:     (@screen-md-min - 1);
@screen-md-max:     (@screen-lg-min - 1);

@phone:             ~"only screen and (max-width: @{screen-xs-min})";
@phone-strict:      ~"only screen and (min-width: @{screen-xs-min}) and (max-width: @{screen-xs-max})";
@tablet:            ~"only screen and (min-width: @{screen-sm-min})";
@tablet-strict:     ~"only screen and (min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})";
@desktop:           ~"only screen and (min-width: @{screen-md-min})";
@desktop-strict:    ~"only screen and (min-width: @{screen-md-min}) and (max-width: @{screen-md-max})";
@large:             ~"only screen and (min-width: @{screen-lg-min})";

footer{
    width: 100%;
    @media @tablet {
        width: 768px;
    }
    @media @desktop {
        width: 940px;
    }
}

Và bạn cũng có thể kết hợp các truy vấn phương tiện như thế này

@media @desktop, @tablet, @ipad{ 

//common styles... 

}

Chúng tôi sử dụng một thiết lập như sau:

@vp_desktop:    801px;
@vp_tablet:     800px;
@vp_mobile:     400px;

.OnDesktop(@rules) { @media screen and (min-width:@vp_desktop){ @rules(); } };
.OnTablet(@rules) { @media screen and (max-width:@vp_tablet){ @rules(); } };
.OnMobile(@rules) { @media screen and (max-width:@vp_mobile){ @rules(); } };

Bạn chỉ cần đặt các biến, các mixin xử lý phần còn lại nên rất dễ bảo trì nhưng vẫn linh hoạt:

div {
  display: inline-block;
  .OnTablet({
    display: block;
  });
}

Điều đáng nói là mặc dù kỹ thuật này rất dễ dàng, nhưng nếu sử dụng không tốt, đầu ra CSS của bạn sẽ chứa đầy các truy vấn phương tiện. Tôi cố gắng giới hạn các truy vấn phương tiện của mình ở 1 điểm ngắt, trên mỗi tệp. Trường hợp tệp sẽ là header.less hoặc search.less.

NB Phương pháp này có thể sẽ không biên dịch trừ khi bạn đang sử dụng trình biên dịch javascript.

Tôi đang sử dụng các mixin & biến này

.max(@max; @rules){@media only screen and (max-width: (@max - 1)){@rules();}}
.min(@min; @rules){@media only screen and (min-width: @min){@rules();}}
.bw(@min; @max; @rules){@media only screen and (min-width: @min) and (max-width: (@max - 1)){@rules();}}

@pad: 480px;
@tab: 800px;
@desktop: 992px;
@hd: 1200px;

Vì vậy, điều này

footer{
    width: 100%;
    .bw(@tab,@desktop,{
        width: 768px;
    });
    .min(@desktop,{
        width: 940px;
    });
}

trở thành

footer {
  width: 100%;
}
@media only screen and (min-width: 800px) and (max-width: 991px) {
  footer {
    width: 768px;
  }
}
@media only screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

@highdensity:  ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
               ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
               ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
               ~"only screen and (min-device-pixel-ratio: 1.5)";

@mobile:        ~"only screen and (max-width: 750px)";
@tab:       ~"only screen and (min-width: 751px) and (max-width: 900px)";
@regular:        ~"only screen and (min-width: 901px) and (max-width: 1280px)";
@extra-large:  ~"only screen and (min-width: 1281px)";

Và đây là những gì tôi đã sử dụng cho dự án của mình:

    @mobile:   ~"only screen and (min-width: 320px) and (max-width: 767px)";
    @tablet:    ~"only screen and (min-width: 768px) and (max-width: 991px)";
    @ipad:    ~"only screen and (min-width: 992px) and (max-width: 1024px)";

    @media @mobile {
      .banner{
        width: auto;
      }
    }

    @media @tablet {
      .banner{
        width: 720px;
      }
    }

  @media @ipad {
      .banner{
        width: 920px;
      }
    }