apa alur kerja dari pixel di figma ke rem di css?

Saya baru mengenal pengembangan web dan ingin memahami alur kerja berikut:

  1. Saya mendesain situs web di figma bersama dengan gaya font di PIXELS (tidak dapat menggunakan em atau rem di figma)
  2. Untuk memiliki situs web yang responsif saya ingin menulis kode css dengan REM

PERTANYAAN: Apakah saya sekarang secara manual mengubah semua unit px menjadi unit rem berdasarkan ukuran font dasar di tag paragraf? bagaimana perhitungannya di sini?

salam hormat Anna


css rem pixel figma
person Anna Mei    schedule 06.06.2020    source sumber
comment
Tidak hanya penggantian px menjadi em atau rem yang membuat situs web Anda responsif, Untuk membuat situs web Anda responsif, Anda harus mengerjakan media queries dengan membuat breakpoint sebanyak yang diperlukan.   -  person Prabesh Gouli    schedule 15.07.2020

Jawaban (2)


arrow_upward
1
arrow_downward

Jika Anda mencari cara cepat untuk menghitung konversi antara px dan rem berdasarkan ukuran dasar, Anda dapat menemukan banyak konverter online, misalnya. https://www.ninjaunits.com/converters/pixels/pixels-rem/

Secara umum, cobalah memanfaatkan praprosesor seperti sass, yang memungkinkan Anda mendeklarasikan variabel sehingga stylesheet Anda lebih mudah diubah. Misalnya:

$font-size-base:              1.125rem !default; // Assumes the browser default, typically `16px`
$font-size-lg:                $font-size-base * 2 !default;
$font-size-md:                $font-size-base * 1.5 !default;
$font-size-sm:                $font-size-base * 0.8 !default;

Semoga ini membantu.

person Jan Bussieck    schedule 06.06.2020

arrow_upward
0
arrow_downward

Saya bekerja dengan rem dan em dan berfungsi dengan baik untuk situs web sederhana, tetapi begitu Anda masuk ke UI yang kompleks, piksel adalah rajanya.

Saat bekerja dengan kueri media responsif, saya merasa sangat tidak dapat diandalkan ketika teks juga meluas karena rem/em. Dengan piksel, Anda menetapkan 16 piksel default untuk teks standar dan kemudian mungkin menurunkannya menjadi 14 piksel dalam beberapa kasus saat menggunakan perangkat seluler. Dan ini dilakukan di seluruh situs web, bukan untuk setiap elemen.

Jadi ya, ada beberapa penyesuaian di sana-sini, tapi tidak banyak. Ini sedikit lebih sulit pada awalnya, tetapi akan sangat menghemat waktu di kemudian hari, karena Anda akan mendapatkan 10 bug setiap minggu dengan beberapa bagian situs web tidak berfungsi dengan benar di beberapa tablet ketika pengguna mengeklik tautan dan teks didorong lebih jauh ke kanan.

Dengan tetap menggunakan piksel secara keseluruhan, Anda memiliki unit pengukuran yang sama di Figma, dalam HTML/CSS dan Javascript, dan segala sesuatunya menjadi sederhana, tanpa perlu perhitungan apa pun.

person dreamLo    schedule 14.05.2021