ฉันยังใหม่ต่อการพัฒนาเว็บและต้องการทำความเข้าใจขั้นตอนการทำงานต่อไปนี้:
คำถาม: ตอนนี้ฉันต้องแปลงหน่วย px ทั้งหมดเป็นหน่วย rem ด้วยตนเองตามขนาดแบบอักษรพื้นฐานในแท็กย่อหน้าหรือไม่ คณิตศาสตร์ที่นี่เป็นยังไงบ้าง?
ขอแสดงความนับถือแอนนา
หากคุณกำลังมองหาวิธีที่รวดเร็วในการคำนวณการแปลงระหว่าง px และ rems ด้วยขนาดฐาน คุณจะพบตัวแปลงจำนวนมากทางออนไลน์ เช่น https://www.ninjaunits.com/converters/pixels/pixels-rem/< /ก>
โดยทั่วไป พยายามใช้ประโยชน์จากตัวประมวลผลล่วงหน้า เช่น sass ซึ่งช่วยให้คุณสามารถประกาศตัวแปรทำให้สไตล์ชีตของคุณเปลี่ยนแปลงได้ง่ายขึ้น ตัวอย่างเช่น:
$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;
หวังว่านี่จะช่วยได้
ฉันทำงานกับ rem และ em และพวกมันทำงานได้ดีสำหรับเว็บไซต์ธรรมดา ๆ แต่เมื่อคุณเข้าสู่ UIs pixel ที่ซับซ้อนก็เป็นสิ่งสำคัญ
เมื่อทำงานกับคำสั่งสื่อที่ตอบสนอง ฉันพบว่ามันไม่น่าเชื่อถืออย่างมากเมื่อข้อความขยายออกเนื่องจาก rem/em ด้วยพิกเซล คุณจะตั้งค่าเริ่มต้นที่ 16px สำหรับข้อความมาตรฐาน จากนั้นอาจลดลงเหลือ 14px ในบางกรณีเมื่อใช้งานบนมือถือ และดำเนินการทั่วทั้งเว็บไซต์ ไม่ใช่สำหรับแต่ละองค์ประกอบ
ใช่ มีการปรับเปลี่ยนบางอย่างที่นี่และที่นั่น แต่ไม่มากขนาดนั้น ในตอนแรกอาจต้องทำงานหนักกว่านี้เล็กน้อย แต่จะช่วยประหยัดเวลาได้มากในภายหลัง เพราะคุณจะได้รับข้อบกพร่อง 10 จุดทุกสัปดาห์ โดยบางส่วนของเว็บไซต์ทำงานไม่ถูกต้องบนแท็บเล็ตบางรุ่นเมื่อผู้ใช้คลิกลิงก์และข้อความถูกผลัก ไปทางขวาต่อไป
ด้วยการใช้พิกเซลทั่วทั้งกระดาน คุณจะมีหน่วยการวัดเดียวกันใน Figma ใน HTML/CSS และ Javascript และสิ่งต่างๆ ก็เรียบง่ายโดยไม่จำเป็นต้องคำนวณใดๆ
