Apakah boleh menggunakan jQuery untuk desain web responsif?

11

Saya telah ditugaskan untuk memperbarui situs agar responsif dan muncul dengan benar di ponsel pintar. Sayangnya, situs dalam bentuk saat ini tidak mudah untuk dikerjakan - Saya tidak bisa begitu saja mengubah CSS.

Apakah dianggap buruk untuk mendeteksi ukuran peramban dan membuat perubahan CSS dengan jQuery?

Misalnya:

if ($(window).width() < 960) {
    //make heaps of CSS changes 
}
css mobile jquery optimization responsive-webdesign MeltingDog
sumber
7
Anda harus mempertimbangkan untuk menggunakan kueri Media sebagai gantinya karena ini merupakan standar yang direkomendasikan oleh W3C sejak Juni 2012.
Zistoloen
Anda bermaksud mengubah style sheet? Saya juga berpikir demikian, tetapi saya masih harus mengubah banyak elemen
MeltingDog
Iya. Bagaimanapun, saya pikir Anda akan memiliki banyak perubahan CSS.
Zistoloen
2
Kalimat "Saya telah ditugaskan untuk memperbarui situs agar responsif" tidak boleh diikuti oleh "Saya tidak bisa hanya mengubah CSS"
Francisco Presencia
4
semuanya membutuhkan lebih banyak jQuery ( Penafian: jangan menganggap serius ini )
Darkhogg

Jawaban:

13

Tentu. Jelas, akan lebih baik menggunakan CSS saja tetapi jika Anda tidak bisa, gunakan apa yang Anda miliki. Lakukan sebanyak yang Anda bisa dengan CSS dan gunakan JS seperlunya. Tidak yakin mengapa Anda tidak dapat mengubah CSS yang ada tetapi Anda bisa menambahkan style sheet dengan JS.

(function() {
  //create a new element
  var newStyle = document.createElement("link");

  //set the required attribute for a valid css file
  newStyle.rel = "stylesheet";
  newStyle.href = "http://example.com/the/location/of/your/css/stylesheet.css";

  //and then append it to the <head>
  document.getElementsByTagName("head")[0].appendChild(newStyle);
})();

Sumber: http://christian-fei.com/add-stylesheets-after-the-head-using-javascript/

kemudian menjadi gila dengan kueri CSS / media.

Atau dengan jQuery:

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

Saya telah melakukan 'skin' responsif di mana beberapa hal tidak mungkin dilakukan tanpa mengubah DOM. Jika Anda tidak memiliki akses ke HTML, manipulasi JS DOM terkadang merupakan satu-satunya jawaban.

Suntingan:
Tergantung pada persyaratan visual dari versi layar kecil Anda, Anda mungkin akan terkejut melihat seberapa jauh potongan CSS ini akan membawa Anda sepanjang jalan menuju 'mobile friendly'.

/* hopefully the original CSS developer didn't include a bunch of !importants.*/
div, p, ul, table, img {
    float: none !important;
    max-width: 96% !important; /* breathing room on the sides */
    margin-left: auto
    margin-right: auto; 
}

Jika pengembang CSS asli terlalu menyukai !importantdan Anda tidak dapat mengakses HTML, Anda dapat menggunakan jQuery / JS untuk menambahkan ID ke badan atau wadah tingkat tinggi dan menambahkannya ke pemilih Anda.

   #i-will-beat-you-important div,
   #i-will-beat-you-important p,
   #i-will-beat-you-important ul { 
        float: none !important; 
        ...
   }
Akan
sumber
Dari pengalaman saya desain responsif dapat dilakukan hanya dengan css. Segera setelah desain Anda juga perlu menjadi adaptif, Anda mungkin juga perlu Javascript. Ingatlah bahwa Anda ingin menjaga agar javascript seminimal mungkin.
Marco
4

Saya akan mengatakan coba gunakan pertanyaan media terlebih dahulu. Salah satu metode yang saya temukan lebih mudah ketika berhadapan dengan desain yang awalnya hanya untuk desktop adalah ini:

Mulai dengan dua lembar gaya terpisah. Satu untuk desain responsif baru, dan yang lainnya untuk versi desktop lama:

<link rel="stylesheet" media="screen and (max-width: 959px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 960px)" href="css/desktop.css">

Semua gaya lama dapat dimuat di desktop.css . Sementara itu Anda bisa mulai dari awal di mobile.css . Anda mungkin menemukan Anda dapat membuat tata letak kolom tunggal yang bagus di CSS seluler yang berfungsi untuk tablet juga.

Pendekatan ini memungkinkan Anda memiliki awal yang baru dan Anda dapat mendesain secara khusus hanya untuk ponsel dan tablet dan tidak memiliki gaya desktop yang masuk dan mengesampingkan hal-hal. Anda dapat menyembunyikan / menampilkan / memposisikan elemen sesuai kebutuhan hanya untuk seluler.

Jika Anda benar-benar perlu mengubah kode desktop untuk membuatnya berfungsi dengan ponsel dan desktop, Anda dapat refactor markup. Atau jika Anda tidak dapat secara realistis memperbaiki HTML untuk versi seluler dan responsif, Anda dapat meletakkan kelas pada kode desktop, mis. Kelas "desktop" dan menggunakan CSS dalam versi seluler untuk menyembunyikannya. Kemudian tulis beberapa HTML baru untuk bagian itu dan berikan a class="mobile". Kemudian gaya sesuai di mobile.css dan sembunyikan di desktop.css .

lightspeeder
sumber
3

Saya bekerja di situs yang menggunakan metode itu, dan saya punya masalah dengan rotasi layar pada perangkat seluler. Karena JavaScript hanya akan mendeteksi sekali pada pemuatan halaman, jika pengguna merotasi perangkat itu tidak akan melebar dengan cara yang sama seperti dengan permintaan media. Lebih mudah bagi saya pada saat itu hanya untuk beralih ke CSS, tetapi mungkin seorang ahli JS akan tahu jika ada cara untuk mendeteksi perubahan lebar viewport. Sepertinya harus ada cara dengan AJAX tapi saya berani bertaruh apa pun yang Anda temukan akan berlebihan sejauh kinerja berjalan, seperti yang dijelaskan megasteve.

stephanie
sumber
2

Responsif dan "tampil dengan benar di ponsel pintar" adalah tugas yang sama sekali berbeda.

  1. Agaknya, responsif mengacu pada menghilangkan - jika mungkin - perjalanan pulang-pergi tambahan ke server. Memeriksa kesalahan, Ajax untuk mengambil data yang diminta, dan manipulasi DOM dinamis adalah tugas yang biasanya meningkatkan daya tanggap. Penggunaan JavaScript (atau kerangka kerja JavaScript) adalah cara yang efektif untuk melakukan ini. Selama beberapa tahun terakhir saya telah pindah dari JavaScript ke jQuery untuk implementasi ini. Dalam banyak kasus, jQuery memiliki kompatibilitas browser bawaan yang memiliki keuntungan yang jelas. Plugin untuk datepicker, autocomplete dan menu menghemat waktu pengembangan.

Seharusnya tidak menjadi sumber utama gaya. Itu pekerjaan CSS. Namun, keduanya dapat digunakan bersama secara efektif. Dalam contoh sederhana, teks dapat ditata berbeda tergantung pada hasil beberapa tindakan. jQuery dapat digunakan untuk mengubah kelas yang ditentukan CSS. 

$('#result').removeClass('red').addClass('green');
  1. Sangat menggoda untuk mencoba menggunakan kembali halaman standar untuk seluler dengan mengubah gaya secara dinamis. Pengalaman saya adalah memberikan solusi yang tidak memuaskan. CSS benar-benar berbeda dan skrip sisi klien yang berbeda diperlukan untuk memanfaatkan fitur seluler. Preferensi saya adalah membuat halaman HTML khusus terpisah daripada satu halaman yang membutuhkan logika untuk memilih gaya atau fungsi yang akan digunakan.
stephanie perry
sumber
Penanya menyebutkan "Desain web responsif" ( en.wikipedia.org/wiki/Responsive_web_design ), yang merujuk pada perancangan untuk berbagai ukuran dan kemampuan layar. Meskipun tidak spesifik untuk ponsel, ini adalah faktor besar dalam membawa teknik ini ke garis depan.
Jacob Hume
1

Kami dulu menggunakan kerangka css 960.gs populer untuk situs kami.

Kami ingin membuatnya responsif.

Seseorang telah membuat plugin responsif berbasis JS untuk 960 gs jadi kami berpikir mengapa tidak hanya menggunakannya karena kami tidak perlu membuat perubahan pada templat situs struktural.

Ini bekerja tetapi lambat di sebagian besar browser termasuk yang bagus. Anda biasanya akan mendapatkan 'flash konten yang tidak ditata' yang akan sangat bervariasi tergantung pada kompleksitas halaman.

Meskipun solusi JS berfungsi mereka tidak ideal, permintaan media CSS 3 adalah pilihan terbaik jika memungkinkan. Pada akhirnya kami hanya melakukan ulang templat situs kami menggunakan Twitter Bootstrap yang sangat cocok untuk kebutuhan kita.

Meskipun mungkin menarik untuk mengambil jalan pintas, sering kali hal ini lebih memakan waktu / menyakitkan dalam jangka panjang.

megasteve4
sumber