Kami memiliki masalah dengan situs yang sudah dalam pengembangan selama hampir sepuluh tahun: default {font-size pada sebagian besar elemen baru terlalu kecil untuk beberapa pemangku kepentingan untuk membaca, dengan nyaman.

Itu aneh, Anda mungkin berkata! Bukankah default font-size: 16px ukuran yang cukup masuk akal? Tidak bisakah saya menambah ukuran font root / bodi ke beberapa default yang masuk akal?

Ay, ada gosok!

Sayangnya situs ini dimulai setelah fad mengatur ukuran font root ke 10 (!) piksel dan membuat bukan hanya teks tetapi juga elemen / ukuran kotak semua relatif terhadap ukuran itu! (Lihat CSS 62.5% Mengapa pengembang menggunakannya? atau https://benfrain.com/just-use-pixels/ untuk beberapa retrospektif.) Jadi saya kira Hindsight adalah 20/20 - sekarang jika saya hanya mengubah ukuran font "default" (root), sekitar 89% dari tata letak saya akan tumbuh dengannya. Bayangkan jika semua tokoh mini lego Anda tiba-tiba tumbuh seukuran orang-orang harga fisher ... kecuali untuk lengan acak / kaki di sini yang memiliki ukuran tetap, atau penskalaan alis yang relatif untuk sesuatu yang lain di sana!

Apakah ada semacam "Escape Hatch" - Out-of-the Box CSS CHERVERESS atau trik kompiler lebih sedikit - yang mungkin membiarkan saya:

  • Tingkatkan default font-size pada halaman saya ke sesuatu yang lebih mudah diakses?

Tanpa harus:

  • secara manual mengerjakan ulang semua yang ada rem / em Panjang melalui corpus besar aturan styling yang lebih sedikit?
0
natevw 3 April 2021, 02:00

1 menjawab

Jawaban Terbaik

Saya mungkin agak tebal di sini tetapi tidak bisakah Anda jatuh kembali ke "pencarian dan ganti" lama yang baik.

Dapatkan daftar ukuran yang digunakan dalam proyek Anda, pencarian cepat untuk "\d{1,3}\.?\d{0,5}rem" harus mencakup sebagian besar kasus dan kemudian hanya memfilter daftar. (1-3 digit, penghentian penuh desimal opsional, opsional 1-5 digit dan kemudian REM).

Cari ukuran apa pun di REM Pertama, memutar "1.6REM" ke "1REM" dan "2.4REM" ke "1.5REM" dll.

Sekarang Anda mungkin dapat melihat masalah di sini, Anda tidak dapat melakukannya dalam satu lintasan karena Anda jelas akan berakhir dengan skenario di mana Anda mengubah satu nilai dan kemudian bertabrakan dalam pencarian lebih lanjut dan ganti (Anda mengubah nilai dari 3.2REM ke 2rem dan kemudian lakukan izin untuk mengubah semua ukuran 2REM dan secara tidak sengaja mengubah item yang lebih besar juga).

Sebaliknya saya akan menetapkan nilai 100 kali lebih besar dari yang mereka butuhkan pada pass pertama dan kemudian kurangi semuanya dengan 100 setelahnya. (Jadi 3.2Rem akan pergi ke 200rem pada pass pertama, lalu 200rem ke 2REM pada lulus kedua, jelas jika ada di mana Anda menggunakan 100 + REM maka ubah ini ke 2000rem dll.)

Kemudian setelah Anda melakukan semua itu, ubah saja ukuran font root dari 62,5% hingga 100%.

Itu harus menangkap sekitar 95% masalah seolah-olah seseorang kemudian menggunakan unit em unit dasar yang berfungsi harus berakhir dengan ukuran yang sama.

Dengan pendekatan ini saya tidak dapat melihat Anda harus melakukan lebih dari 50 pencarian dan mengganti bahkan melintasi aplikasi raksasa yang menggunakan rem untuk ukuran div dll.

Saya tidak bisa memikirkan "gotchyas" apa pun dengan pendekatan ini, tetapi saya yakin akan ada begitu saja kembali sebelum Anda melakukannya dengan jelas 😋!

1
Graham Ritchie 3 April 2021, 07:25