Pertanyaan Tombol "Tampilkan situs lengkap" untuk memintas kueri media css


Saya menggunakan kueri media css di situs web saya untuk beralih ke tata letak yang lebih vertikal pada perangkat yang lebih kecil. Ini berfungsi dengan baik, tetapi saya ingin menambahkan tombol di situs dengan sesuatu seperti "Tampilkan versi desktop". Saya ingin membuat tombol ini (atau tautan, apa pun) memaksa atau mengubah evaluasi permintaan media sehingga mereka mengevaluasi seolah-olah lebar layar lebih besar dari itu (misalnya 1200px bukan 320px). Apakah ini mungkin?

Css saya terlihat seperti ini:

#logo {
    /* Mobile style */
    [...]

    @media (min-width: @screen-sm) {
        /* Desktop style */
        [...]
    }
}

#footer {
    /* Mobile style */
    [...]

    @media (min-width: @screen-sm) {
        /* Desktop style */
        [...]
    }
}

/* And so on... i.e. multiple piecewise styles, following the same pattern used in Bootstrap's css */

Saya menemukan pendekatan yang menarik ini yang menggunakan kelas css pada tubuh, bukan kueri media untuk beralih antar tata letak. Namun, itu benar-benar jauh dengan permintaan media yang sebenarnya dan menggunakan javascript sebagai gantinya. Browser seluler "web lengkap" dan kueri media ukuran layar berbasis

sunting

Memurnikan contoh css. 2 jawaban pertama sangat membantu, tetapi saya lebih suka tidak harus benar-benar memodifikasi organisasi css untuk dipisahkan pada desktop root dan versi seluler. Satu lagi teknik yang menarik: KURANG: Dapatkah Anda mengelompokkan pemilih CSS dengan kueri media?

sunting 2

Pendekatan yang menarik adalah memodifikasi kueri media css melalui javascript. Ini sedikit membuat saya takut meskipun karena dukungan browser mungkin tidak dapat diandalkan untuk teknik yang tidak jelas seperti itu: http://jonhiggins.co.uk/words/max-device-width/


4
2018-01-23 15:37


asal


Jawaban:


Ada sedikit redundansi dengan metode ini, tetapi pemilih memiliki spesifisitas yang lebih tinggi sifatnya didahulukan bahkan jika permintaan media cocok. Sebagai contoh:

.container, .full-site.container {
    /* full site styles */
}
@media (max-width: 395px) {
    .container {
        /* mobile styles */
    }
}

Kapan full site diklik, tambahkan .full-site kelas dan gaya situs lengkap akan berlaku bahkan pada perangkat dengan lebar 395 piksel.

http://jsfiddle.net/7ZW9y/


4
2018-01-23 15:46



Dua kemungkinan implementasi yang muncul dalam pikiran: 1) segregasi kueri media Anda ke lembar gaya terpisah, 2) tambahkan kelas khusus ke semua pemilih di dalam kueri media.

Opsi 1: Stylesheet terpisah

Masukkan semua kueri media yang ingin Anda hapus (menggunakan tombol "Tampilkan versi desktop") ke stylesheet terpisah (mis., "Mobile.css"):

<link rel="stylesheet" type="text/css" href="normal.css" />
<link rel="stylesheet" id="mobileStyle" type="text/css" href="mobile.css" />

Anda kemudian dapat menghapus elemen ini menggunakan jQuery (misalnya, $('#mobileStyle').remove()). Menghapus elemen yang mereferensikan stylesheet akan menghapus semua gaya yang ditentukan dalam stylesheet.

Opsi 2: Mempersiapkan kelas CSS

Simpan semuanya dalam satu stylesheet tetapi tambahkan semua pemilih yang ditanya media dengan satu kelas. Misalnya, Anda bisa menambahkan .mobile-ready kelas ke <body> lalu:

@media (min-width: ... AND max-width: ...) {
    .mobile-ready header{
    }
    .mobile-ready footer{
    }
    .mobile-ready ...{
    }
}

Dengan tombol "Tampilkan versi desktop" Anda, hapus .mobile-ready kelas dari Anda <body>, yang akan menghapus semua gaya yang dicakup oleh kelas. Menulis CSS dengan cara ini mudah dilakukan KURANG atau Kelancangan.


3
2018-01-23 15:47



Coba ini ... sederhana, tetapi solusi yang masuk akal untuk situs yang dikodekan secara ketat.

$('meta[name="viewport"]').prop('content', 'width=870');

Atur lebar sesuai yang Anda butuhkan. Saya menggunakan ini dalam contoh di mana situs yang sudah ada dan saya harus mengizinkan ponsel untuk ditampilkan sebagai halaman normal, tetapi halaman normal dipusatkan dengan konten yang memiliki lebar 865. Ini meminimalkan dampak halaman penuh pada perangkat seluler .


3
2017-10-28 18:29