Saya berada dalam keadaan baru -baru ini di mana saya ingin menunjukkan iPhone di laman web. Saya mahu pengguna dapat berinteraksi dengan demo aplikasi pada telefon "mengejek" ini, jadi ia harus diberikan dalam CSS, bukan imej. Saya dapati sebuah perpustakaan hebat yang dipanggil MarvelApp/Devices.css. Perpustakaan melaksanakan peranti yang saya perlukan dengan CSS murni, dan mereka kelihatan hebat, tetapi ada masalah: peranti yang ditawarkan tidak responsif (iaitu mereka tidak dapat diperkatakan). Isu terbuka menyenaraikan beberapa pilihan, tetapi masing -masing mempunyai ketidakcocokan pelayar atau isu lain. Saya berikan untuk mengubahsuai perpustakaan untuk membuat peranti responsif.

Berikut adalah perpustakaan yang boleh disesuaikan akhir. Di bawah, kami akan melalui kod yang terlibat dalam menciptanya.

Perpustakaan asal ditulis dalam SASS dan melaksanakan peranti menggunakan unsur -unsur dengan saiz tetap dalam piksel. Penulis juga menyediakan contoh HTML yang mudah untuk setiap peranti, termasuk iPhone X yang akan kami bekerjasama sepanjang artikel ini. Inilah pandangan yang asal. Ambil perhatian bahawa peranti ia membuat, sementara terperinci, agak besar dan tidak mengubah saiz.

Inilah pendekatannya

Terdapat tiga helah CSS yang saya gunakan untuk membuat peranti disesuaikan:

1. calc (), fungsi CSS yang boleh melakukan pengiraan, walaupun input mempunyai unit yang berbeza
2. -Divisor-Divisor, harta tersuai CSS yang digunakan dengan fungsi VAR ()
3. @media pertanyaan dipisahkan oleh min lebar

Mari kita lihat setiap daripada mereka.

c alc ()

Fungsi CSS Calc () membolehkan kita mengubah saiz pelbagai aspek peranti. Fungsi ini mengambil ungkapan sebagai input dan mengembalikan penilaian fungsi sebagai output, dengan unit yang sesuai. Jika kita mahu membuat peranti separuh saiz asalnya, kita perlu membahagikan setiap pengukuran piksel sebanyak 2.

Sebelum:

 lebar: 375px;

Selepas:

 lebar: calc (375px / 2);

Coretan kedua menghasilkan separuh panjang saiz coretan pertama. Setiap pengukuran piksel di perpustakaan asal perlu dibungkus dalam fungsi calc () untuk ini untuk mengubah saiz keseluruhan peranti.

var (-Size-Divisor)

Pembolehubah CSS mesti diisytiharkan terlebih dahulu pada permulaan fail sebelum ia boleh digunakan di mana -mana sahaja.

 : root {
 --size-divisor: 3;
}

Dengan itu, nilai ini boleh diakses sepanjang stylesheet dengan fungsi VAR (). Ini akan sangat berguna kerana kami akan mahu semua kiraan piksel dibahagikan dengan nombor yang sama semasa mengubah saiz peranti, sambil mengelakkan nombor sihir dan memudahkan kod yang diperlukan untuk membuat peranti responsif.

 lebar: calc (375px / var (-saiz-divisor));

Dengan nilai yang ditakrifkan di atas, ini akan mengembalikan lebar asal yang dibahagikan dengan tiga, dalam piksel.

@media

Untuk membuat peranti responsif, mereka mesti bertindak balas terhadap perubahan saiz skrin. Kami mencapai ini menggunakan pertanyaan media. Pertanyaan ini menonton lebar skrin dan api jika saiz skrin melintasi ambang. Saya memilih titik putus berdasarkan saiz Bootstrap untuk XS, SM, dan sebagainya.

Tidak perlu menetapkan titik putus pada lebar minimum piksel sifar; Sebaliknya, pengisytiharan akar pada permulaan fail mengendalikan skrin kecil ini. Pertanyaan media ini mesti pergi pada akhir dokumen dan disusun dalam urutan menaik-lebar min.

 @media (min-lebar: 576px) {
 : root {
  --size-divisor: 2;
 }
}
@media (min-lebar: 768px) {
 : root {
  --size-divisor: 1.5;
 }
}
@media (min-lebar: 992px) {?
 : root {
  --size-divisor: 1;
 }
}
@media (min-lebar: 1200px) {?
 : root {
  --size-divisor: .67;
 }
}

Menukar nilai dalam pertanyaan ini akan menyesuaikan magnitud saiz semula yang dilakukan oleh peranti. Perhatikan bahawa calc () mengendalikan terapung hanya serta bilangan bulat.

Membuat proses preprocessor dengan python

Dengan alat-alat ini, saya memerlukan satu cara untuk menggunakan pendekatan baru saya ke perpustakaan berbilang ribu-line. Fail yang dihasilkan akan bermula dengan perisytiharan berubah -ubah, termasuk seluruh perpustakaan dengan setiap pengukuran piksel yang dibalut dalam fungsi calc (), dan berakhir dengan pertanyaan media di atas.

Daripada menyediakan perubahan dengan tangan, saya membuat skrip python yang secara automatik menukarkan semua pengukuran piksel.

 Skala def (token):
 jika token [-2:] == '; \ n':
  kembali 'calc (' token [:-2] ' / var (-saiz-divisor)); \ n'
 elif token [-3:] == '); \ n':
  kembali '(' token [:-3] ' / var (-saiz-divisor)); \ n'
 kembali 'calc (' token ' / var (-saiz-divisor))'

Fungsi ini, diberi rentetan yang mengandungi NNPX, mengembalikan Calc (nnpx / var (-saiz-divisor));. Sepanjang fail, terdapat hanya tiga perlawanan untuk piksel: NNPX, NNPX; dan nnpx);. Selebihnya hanyalah rentetan rentetan. Walau bagaimanapun, token ini telah dihasilkan dengan memisahkan setiap baris oleh aksara ruang.

 DEF BUILD_FILE (SCSS):
 out = ': root {\ n \ t--size-divisor: 3; \ n} \ n \ n'
 untuk baris dalam SCSS:
  token = line.split ('')
  untuk saya dalam julat (len (token)):
   jika 'px' dalam token [i]:
    token [i] = skala (token [i])
  keluar = '' .join (token)
 out = "@media (min-lebar: 576px) {\ n \
  : root {\ n \ t--size-divisor: 2; \ n \
  } \ n} \ n \ n@media (min-lebar: 768px) {\ n \
  : root {\ n \ t--size-divisor: 1.5; \ n \
  } \ n} \ n \ n@media (min-lebar: 992px) {\
  \ n: root {\ n \ t--size-divisor: 1; \ n \
  } \ n} \ n \ n@media (min-lebar: 1200px) {\
  \ n: root {\ n \ t--size-divisor: .67; \ n} \ n} "
 kembali

Fungsi ini, yang membina perpustakaan baru, bermula dengan mengisytiharkan pembolehubah CSS. Kemudian, ia melangkah melalui seluruh perpustakaan lama untuk mencari pengukuran piksel ke skala. Bagi setiap beratus -ratus token, ia mendapati yang mengandungi PX, ia menstabilkan token. Apabila lelaran berlangsung, fungsi ini mengekalkan struktur garis asal dengan menyambung semula token. Akhirnya, ia menambahkan pertanyaan media yang diperlukan dan mengembalikan seluruh perpustakaan sebagai rentetan. Sedikit kod untuk menjalankan fungsi dan membaca dan menulis dari fail menyelesaikan tugas.

 jika __name__ == '__main__':
 f = buka ('desta_old.scss', 'r')
 scss = f.readlines ()
 f.close ()
 OUT = BUILD_FILE (SCSS)
 f = buka ('devices_new.scss', 'w')
 f.write (keluar)
 f.close ()

Proses ini mewujudkan perpustakaan baru di Sass. Untuk membuat fail CSS untuk kegunaan akhir, jalankan:

 SASS Devices_new.scss Devices.css

Perpustakaan baru ini menawarkan peranti yang sama, tetapi mereka responsif! Inilah:

Untuk membaca fail output sebenar, iaitu beribu -ribu baris, periksa di GitHub.

Pendekatan lain

Walaupun hasil proses ini cukup menarik, ia adalah sedikit kerja untuk mendapatkannya. Mengapa saya tidak mengambil pendekatan yang lebih mudah? Berikut adalah tiga lagi pendekatan dengan kelebihan dan kelemahan mereka.

zum

Satu pendekatan yang menjanjikan pada mulanya adalah dengan menggunakan Zoom untuk skala peranti. Ini akan secara seragam skala peranti dan boleh dipasangkan dengan pertanyaan media seperti penyelesaian saya, tetapi akan berfungsi tanpa calc () dan pembolehubah yang menyusahkan.

Ini tidak akan berfungsi untuk alasan yang mudah: Zoom adalah harta yang tidak standard. Antara batasan lain, ia tidak disokong di Firefox.

Ganti Px dengan em

Satu lagi pendekatan mencari-dan-rplace menetapkan menggantikan semua contoh PX dengan EM. Kemudian, peranti mengecut dan berkembang mengikut saiz fon. Walau bagaimanapun, mendapatkannya cukup kecil untuk dimuatkan pada paparan mudah alih mungkin memerlukan saiz fon minuscule, lebih kecil daripada penyemak imbas saiz minimum, seperti Chrome, menguatkuasakan. Pendekatan ini juga boleh menghadapi masalah jika pelawat ke laman web anda menggunakan teknologi bantuan yang meningkatkan saiz fon.

Ini boleh ditangani dengan mengukur semua nilai turun dengan faktor 100 dan kemudian menggunakan saiz fon standard. Walau bagaimanapun, ini memerlukan pra -proses yang banyak seperti pendekatan artikel ini, dan saya fikir ia lebih elegan untuk melakukan pengiraan ini secara langsung dan bukannya memanipulasi saiz fon.

skala ()

Fungsi skala () boleh mengubah saiz keseluruhan objek. Fungsi ini mengembalikan , yang boleh diberikan kepada atribut transformasi dalam gaya. Secara keseluruhannya, ini adalah pendekatan yang kuat, tetapi tidak mengubah pengukuran sebenar peranti CSS. Saya lebih suka pendekatan saya, terutamanya apabila bekerja dengan elemen UI yang kompleks yang diberikan pada "skrin" peranti.

Chris Coyier menyediakan contoh menggunakan pendekatan ini.

Kesimpulannya

Beratus -ratus panggilan Calc () mungkin bukan alat pertama yang saya akan capai jika melaksanakan perpustakaan ini dari awal, tetapi secara keseluruhan, ini adalah pendekatan yang berkesan untuk membuat perpustakaan sedia ada yang boleh disusun semula. Menambah pembolehubah dan pertanyaan media membuat objek responsif. Sekiranya perpustakaan yang mendasari dikemas kini, skrip Python akan dapat memproses perubahan ini ke dalam versi baru perpustakaan responsif kami.

Atas ialah kandungan terperinci Menjadikan objek bersaiz tetap menjadi elemen responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!