მთავარ შინაარსზე გადასვლა
LibraTool logoLibraTool

Pixel-დან REM-ად კონვერტერი უფასოდ

გადაიყვანეთ px, rem, em, pt, vw, vh და %-ს შორის კონფიგურირებადი ბაზის შრიფტის ზომით. მოიცავს გავრცელებული pixel ზომების საცნობარო ცხრილს.

მუშაობს ოფლაინ ჩატვირთვის შემდეგ
1rem

კონტექსტი (მოქმედებს rem/em/vw/vh/%-ზე)

16 px-ის ყველა გადაყვანა

უახლოესი Tailwind ტოკენები (16px ფესვის ზომაზე)

გავრცელებული px ზომები → rem (16px ბაზაზე)

ჩასმული CSS-ის გარდაქმნა

გავრცელებული გამოყენება

  • PX-დან REM-ში ვებ განვითარებასპიქსელი მნიშვნელობების გადაკეთება rem ერთეულებში სკალირებული და ხელმისაწვდომი CSS. დააყენეთ თქვენი საბაზო შრიფტის ზომა და დაუყოვნებლივ იხილეთ ყველა ექვივალენტი მნიშვნელობა.
  • CSS ერთეულები რესპონსიული დიზაინისთვისგადაიყვანეთ px, vw, vh და % შორის, რომ შექმნათ განლაგებები, რომლებიც სწორად ერგება ეკრანის სხვადასხვა ზომასა და ორიენტაციას.
  • დიზაინის სპეციფიკაციების გადაკეთება CSS ერთეულებადFigma ან Sketch პიქსელი მნიშვნელობების ხელი rem/em ერთეულებში სუფთა, სკალირებული CSS განხორციელება.
  • Tailwind CSS ერთეული ცნობარიმიხვდეთ როგორ Tailwind CSS ზომა კლასები რუკა პიქსელი და rem მნიშვნელობების სიზუსტე განხორციელება.
  • CSS ერთეულების გადაკეთება ბეჭდვის სტილის ფურცლებისთვისpx, pt და rem შორის გადაკეთება ბეჭდვის მედია შ requests და PDF გამომავალი CSS.

როგორ მუშაობს

ყოველი გარდაქმნა მთლიანად თქვენს ბრაუზერში მუშაობს ხელით დაწერილი, ნულოვან-დამოკიდებულებიანი არითმეტიკული ძრავის გამოყენებით. ხელსაწყო შვიდ CSS ერთეულს (px, rem, em, pt, vw, vh და %) შორის გარდაქმნას პიქსელების, როგორც საერთო ბაზის, გავლით ატარებს, თქვენს კონფიგურირებულ ძირეულ შრიფტის ზომაზე, მშობელი შრიფტის ზომაზე ან ხედვის-ველის განზომილებებზე უბრალო გაყოფის ან გამრავლების გამოყენებით.

  1. 1
    დააყენეთ თქვენი კონტექსტის მნიშვნელობები
    გარდაქმნამდე, თქვენ ადგენთ ოთხ რიცხვს, რომლებიც ფარდობით CSS ერთეულებს მნიშვნელოვანს ხდის: ძირეული შრიფტის ზომა (ნაგულისხმევად 16px, რაც ბრაუზერის ნაგულისხმევია), მშობელი ელემენტის შრიფტის ზომა (em და % გარდაქმნებისთვის), და ხედვის-ველის სიგანე და სიმაღლე (vw და vh-სთვის). ეს იგივე მნიშვნელობებია, რასაც თქვენი ბრაუზერი გამოიყენებდა CSS-ის გაშვების დროს დამუშავებისას.
  2. 2
    პიქსელი, როგორც უნივერსალური შუალედური
    გადამყვანი ჯერ იძახებს toPixels()-ს, თქვენს შეყვანილს დაუმუშავებელ პიქსელთა რაოდენობამდე ნორმალიზაციისთვის — მაგალითად, 1.5rem ხდება 1.5 × baseFontPx, ხოლო 50vw ხდება 0.5 × vpWidth. შემდეგ fromPixels() ამ პიქსელთა რაოდენობას ყოფს სამიზნე ერთეულის შესაბამის ფაქტორზე. ყველა შვიდი ერთეული ერთდროულად ჩნდება გარდაქმნის ცხრილში.
  3. 3
    უახლოესი Tailwind ტოკენის ძებნა
    გარდაქმნის შემდეგ, ხელსაწყო ითვლის rem მნიშვნელობას და ორ ჩაშენებულ საძებნ ცხრილს სკანირებს — Tailwind-ის ცამეტ შრიფტის-ზომის ტოკენს (text-xs-დან text-9xl-მდე) და მის დაშორების სკალას — უახლოესი დამთხვევის აბსოლუტური მანძილით საპოვნელად. = ნიშანი ნიშნავს, რომ მნიშვნელობა ზუსტი ტოკენია; ≈ ნიშნავს, რომ ის უახლოესი მიახლოებაა.
  4. 4
    მასობრივი CSS ხელახლა-დაწერა regex-ის მეშვეობით
    „ჩასმა-CSS“ პანელი დაუმუშავებელ CSS ტექსტს იღებს და regex ჩანაცვლებას ატარებს: px→rem რეჟიმში ის ედარება ყოველ px ტოკენს და ჩაანაცვლებს რიცხვით ნაწილს value/baseFontPx + rem-ით; rem→px რეჟიმში პირიქითაა. ჩანაცვლების რაოდენობა ჩნდება, რამდენი მნიშვნელობა ხელახლა დაიწერა, დასამოწმებლად.

დაკავშირებული ინსტრუმენტები

📏

ერთეულის გადამყვანი

გადაიყვანეთ სიგრძის, წონის, ტემპერატურის, ფართობის, მოცულობის და სხვა ერთეულებს შორის.

სცადე
📐

CSS clamp() გენერატორი

გენერირება გაუკეთეთ მოქნილ CSS clamp() მნიშვნელობას responsive ტიპოგრაფიისა და დაშორებისთვის. დააყენეთ მინ/მაქს ზომა და viewport დიაპაზონი, ნახეთ პირდაპირი გადახედვა და დააკოპირეთ ერთი სტრიქონის CSS.

სცადე
🟦

CSS Grid შემქმნელი

ვიზუალურად დაამუშავეთ CSS grid — ტრეკები, ერთეულები და უფსები — და დააკოპიეთ გენერირებული CSS და HTML.

სცადე

ხშირად დასმული კითხვები