Pertanyaan KURANG menetapkan variabel CSS dalam permintaan media?


Saya sedang mengerjakan situs web khusus iPad. Untuk membuat situs web saya berfungsi di layar retina iPad dan versi iPad yang lebih lama, saya ingin menetapkan variabel dalam LESS CSS dalam permintaan media seperti:

@media all and (max-width: 768px) {
    @ratio: 1;
}

@media all and (min-width: 769px) {
    @ratio: 2;  
}

Jadi ketika Anda menetapkan sesuatu dalam piksel, Anda dapat melakukannya

width: 100px * @ratio;

Tapi saya mendapat kesalahan kompilasi yang mengatakan @ratio tidak didefinisikan. Apakah mungkin untuk memiliki solusi untuk membuatnya bekerja? Terima kasih.


39
2018-06-05 22:51


asal


Jawaban:


Akan menyenangkan, tetapi ini tidak mungkin dilakukan seperti ini.

KURANG mengkompilasi kueri media Anda ke kueri media yang sebenarnya, sehingga pada waktu kompilasi tidak ada indikasi kueri media mana yang relevan dengan peramban.

Setelah waktu kompilasi Anda hanya memiliki CSS tidak kurang sehingga Anda tidak dapat memiliki variabel lagi.

Anda dapat melakukan ini sebagai gantinya tetapi tidak begitu elegan:

@base_width: 100px;

@media all and (max-width: 768px) {
    .something {
        width: @base_width;
    }
}

@media all and (min-width: 769px) {
    .something {
        width: @base_width * 2;
    }
}

40
2018-06-05 23:00



Saya tahu saya terlambat dengan jawaban saya tetapi seseorang mungkin menganggap ini berguna.

Anda dapat memindahkan gaya Anda ke file terpisah

// styles.less
.foo {
  width: 100px * @ratio;
}

Dan kemudian mengimpor file beberapa kali setelah mengubah nilai variabel

// main.less
@ratio: 1; // initial value

@media all and (max-width: 768px) {
  @ratio: 1;
  @import (multiple) "styles";
}

@media all and (min-width: 769px) {
  @ratio: 2;
  @import (multiple) "styles";
}

Perhatikan bahwa (beberapa) penting di sini

Kode yang dikompilasi akan terlihat seperti ini

// main.css
@media all and (max-width: 768px) {
  .foo {
    width: 100px;
  }
}
@media all and (min-width: 769px) {
  .foo {
    width: 200px;
  }
}

5
2018-01-11 07:37



Itu agak remeh, tetapi solusi yang mungkin adalah mengatur ukuran font untuk elemen pembungkus dan mengatur semua unit ke em:

HTML:

<div id="wrap">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

KURANG:

#wrap 
    {
    font-size: 100px;
    width: 10em; // = 1000px;
    @media all and (max-width: 768px)
        {
        font-size: 60px;
        }
    .child1
        {
        width: 5em; // 500px normally, 300px on small screens
        }
    .child1
        {
        width: 2.5em; // 250px normally, 150px on small screens
        }
    }

Itu tentu saja tidak berhasil jika Anda memiliki elemen yang mengandung teks DAN anak-anak.


1
2018-02-15 21:49



KURANG saat ini tidak dapat melakukan ini, meskipun secara teknis mungkin untuk melakukannya. Fitur ini telah diminta dalam edisi Gitub yang berjudul Lebih sedikit variabel dalam kueri media.

Lihat juga pertanyaan ini: CSS pra-prosesor dengan kemungkinan untuk mendefinisikan variabel dalam kueri @media


1
2017-07-02 09:58



Saya menemukan solusi yang diterima untuk tidak bekerja, karena kompiler akan mengeluh mixin tidak didefinisikan. Solusi alternatif:

@base_width: 100px;

.mixin {
    width: @base_width;

    @media all and (min-width: 769px) {
        width: @base_width * 2;
    }
}

0
2017-09-30 17:00



Dengan sedikit kita dapat mendefinisikan variabel untuk permintaan media.
pertama-tama mendeteksi resolusi iPad:

@iPad: ~"only screen and (min-width: 40.063em) and (max-width: 64em);

Ini sama dengan 641px dan 1024px.


Sekarang mendeteksi resolusi tinggi:

@highResolution: ~"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)";



Sekarang kita dapat menggabungkan 2 variabel ini dalam kueri media seperti ini:

@media @iPad, @highResolution{ .yourCssClass{} }

ini hanya berlaku di iPad (atau resolusi serupa) dengan layar retina (atau kerapatan piksel serupa).


-2
2017-12-03 18:09