px-ஐ rem ஆக மாற்றுதல் Pixels ↔ Root em இலவசம் ஆன்லைன் பாதுகாப்பு

வடிவமைப்பாளர்களும் உருவாக்குநர்களும் px ஐ rem ஆக ஏன் மாற்றுகிறார்கள்

வடிவமைப்புக் கருவிகள் பிக்சல்களில் பேசுகின்றன. ஒரு மாதிரி தலைப்பு 32 px என்கிறது, பிரிவுகளுக்கு இடையிலான இடைவெளி 48 px, பொத்தானுக்கு 16 px உள்ளிடம். நடைத்தாள்கள், நன்றாக எழுதப்பட்டால், rem இல் பேசுகின்றன. அந்த இரு மொழிகளுக்கு இடையிலான இடைவெளியில்தான் இந்தப் பக்கம் அமர்கிறது: நீங்கள் பிக்சல்களில் ஓர் அளவைத் தட்டச்சு செய்து rem இல் படிக்கிறீர்கள், அதனால் நீங்கள் CSS இல் இடும் எண் வடிவமைப்பாளர் எண்ணியதைக் குறிக்கிறது. px ஐ rem ஆக மாற்றுவது ஒரு சிறு செயல், ஆனால் ஓர் இணையதளத்தின் வாழ்நாளில் அது நூற்றுக்கணக்கான முறை செய்யப்படுகிறது, தவறான அடிப்படை ஒரு கவனமான அமைப்பை எல்லா இடங்களிலும் ஒரே நேரத்தில் சற்றுத் தவறானதாக மாற்றுகிறது.

rem ஐப் பொருட்படுத்தவே காரணம் அணுகல்தன்மையும் நெகிழ்வும். ஒரு rem என்பது வேர் எழுத்துரு அளவின் ஒரு மடங்கு, சொல்லப்படாவிட்டால் உலாவி அதை 16 px ஆக அமைக்கிறது, வாசகர் அதைத் தம் அமைப்புகளில் மாற்றலாம். எனவே rem இல் எழுதப்பட்ட ஓர் அமைப்பு, மோசமான கண்பார்வை உள்ள ஒருவர் இயல்பு உரை அளவை உயர்த்தும்போது தன் வடிவத்தை வைத்திருக்கிறது: எழுத்து, இடைவெளி, பெட்டிகள் ஒன்றாக வளர்கின்றன. பிக்சல்களில் எழுதப்பட்ட ஓர் அமைப்பு பின்தொடர்வதில்லை, பெரிய உரையைக் கேட்ட வாசகர் நெருக்கடியான பெட்டிகளில் பெரிய எழுத்துகளைப் பெறுகிறார், அல்லது எதுவுமே இல்லை. அதனால்தான் கிட்டத்தட்ட ஒவ்வொரு நவீன நடை வழிகாட்டியும் ஒரே விஷயத்தைச் சொல்கிறது: எழுத்துக்கும் இடைவெளிக்கும் rem ஐப் பயன்படுத்துங்கள்.

இந்தப் பக்கம் கணிதத்தை உங்கள் உலாவியில் செய்கிறது. எதுவும் பதிவேற்றப்படுவதில்லை, மாற்றம் எதைச் சார்ந்துள்ளதோ, அடிப்படை அளவு, அது உங்கள் முதுகுக்குப் பின்னால் கருதப்படுவதற்குப் பதிலாக கீழே எழுதப்பட்டுள்ளது, நீங்கள் மாற்றக்கூடிய ஒரு புலத்தில் அமர்கிறது. கீழே சூத்திரம், பொதுவான அளவுகளின் அட்டவணை, அடிப்படை ஏன் முக்கியம், அவசரத்தில் px ஐ rem ஆக மாற்றுபவர்களைப் பிடிக்கும் பொறிகள், உண்மை நடைத்தாள்களில் முடிவைப் பயன்படுத்துவதற்கான ஒரு குறுகிய வழிகாட்டி ஆகியவற்றைக் காண்பீர்கள்.

சூத்திரமும் அடிப்படையும்

rem என்பது px வகு அடிப்படை

சூத்திரம் ஒரு வகுத்தல்: rem = px ÷ base. வழக்கமான 16 px அடிப்படையுடன், 24 px அளவு 1.5 rem ஆகிறது, 32 px என்பது 2 rem, 8 px என்பது 0.5 rem. நீங்கள் தட்டச்சு செய்யும்போது பக்கம் முடிவைக் காட்டுகிறது, அது பயன்படுத்திய அடிப்படையையும் காட்டுகிறது, எனவே 24 px = 1.5 rem (16 px) என்ற வரி எது கருதப்பட்டது என்று சரியாகச் சொல்கிறது.

16 எங்கிருந்து வருகிறது

அடிப்படை 16 px இல் தொடங்குகிறது, ஏனெனில் யாரும் வேறாகச் சொல்லாதபோது உலாவி பயன்படுத்துவது அதுவே. அது வலையின் சட்டம் அல்ல; அது இயல்பின் இயல்பு, பல பத்தாண்டுகளாக நிலையாக உள்ளது. உங்கள் CSS வேர் எழுத்துரு அளவைத் தொடவே இல்லை என்றால், பெரும்பாலான பார்வையாளர்களுக்கு 1 rem என்பது 16 px. தொட்டால், அடிப்படை நீங்கள் அமைத்தது.

62.5% உத்தியும் மக்கள் அதை ஏன் பயன்படுத்துகிறார்கள் என்பதும்

சில நடைத்தாள்கள் வேர் அளவை 62.5% ஆக அமைக்கின்றன, இது இயல்பு உலாவியில் 1 rem ஐ 10 px க்குச் சமமாக்குகிறது, அதனால் 24 px என்பது வெறுமனே 2.4 rem, கணிதம் தலையில் செய்ய எளிது. அது வேலை செய்கிறது, ஆனால் அதற்கு ஒரு செலவு உண்டு: முழுப் பக்கமும் இப்போது அந்த விழுக்காட்டைச் சார்ந்துள்ளது, 16 ஐ அடிப்படையாக எதிர்பார்க்கும் எந்தக் கூறும் மிகச் சிறியதாக வெளிவரும். உங்கள் திட்டம் இதைச் செய்தால், இந்தப் பக்கத்தின் அடிப்படைப் புலத்தில் 10 ஐத் தட்டச்சு செய்யுங்கள், ஒவ்வோர் எண்ணும் உங்கள் CSS உடன் பொருந்தும்.

மாற்றம் எதை வைத்திருக்கிறது, எதை வைத்திருக்க முடியாது

அது விகிதத்தை வைத்திருக்கிறது

ஒரு rem என்பது வேர் எழுத்துரு அளவு எதுவோ அதுவே, எனவே rem இல் எழுதப்பட்ட ஓர் அமைப்பு அந்த அளவு மாறும்போது தன் வடிவத்தை வைத்திருக்கிறது. அவ்வாறு எழுத முழுக் காரணம் அதுவே. நீங்கள் px ஐ rem ஆக மாற்றும்போது, நீங்கள் பெறும் எண் நீங்கள் தேர்ந்தெடுத்த அடிப்படையில் பிக்சல் மதிப்புக்கு இருந்த அதே விகிதம், இப்போது அளவிடும் ஒரு வழியில் வெளிப்படுத்தப்படுகிறது.

அது உங்கள் வாசகரின் அமைப்புகளை அறிய முடியாது

எண் முழுவதுமாக அடிப்படையைச் சார்ந்தது. உங்கள் CSS வேர் உறுப்பில் வேறு அளவை அமைத்தால், அல்லது வாசகர் தங்கள் உலாவியில் இயல்பு உரை அளவை மாற்றியிருந்தால், பலர் செய்கிறார்கள், அதற்கு உரிமையும் உண்டு, அப்போது அவர்களுக்கு 1 rem என்பது 16 px அல்ல. பக்கத்திலுள்ள எண் புலத்திலுள்ள அடிப்படைக்கு மட்டுமே சரி. இது கருவியின் குறை அல்ல, அலகின் இயல்பு: அது சார்புடையது, சார்புடைய அலகுக்கு மாற்ற நிலையான மதிப்பு இல்லை.

சுற்றுதல்

16 ஆல் வகுத்தல் பல பொதுவான அளவுகளுக்குத் தூய முடிவுகளையும் (16, 24, 32, 48, 64) மற்றவற்றுக்குத் திரும்ப வரும் தசமங்களையும் (10 px என்பது 0.625 rem; 13 px என்பது 0.8125) தருகிறது. எண் தேவைப்படும் அளவுக்கு இலக்கங்களைப் பக்கம் தருகிறது, நடைத்தாளில் எத்தனையை வைத்திருப்பது என்பதை நீங்கள் தீர்மானிக்கிறீர்கள். உலாவிகள் நீண்ட தசமங்களைச் சிக்கலின்றிக் கையாள்கின்றன, ஆனால் 0.8125rem போன்ற ஒரு சுற்றிய மதிப்பு பத்து இலக்கங்கள் கொண்டதைவிடப் படிக்கவும் பராமரிக்கவும் எளிது.

பொதுவான அளவுகள்

பக்கத்தின் அடிப்பகுதியில் அட்டவணை

மாற்றிக்குக் கீழே பொதுவான அளவுகளின் ஓர் அட்டவணையைக் காண்பீர்கள்: 8 px என்பது 0.5 rem, 10 px என்பது 0.625, 12 px என்பது 0.75, 14 px என்பது 0.875, 16 px என்பது 1, 18 px என்பது 1.125, 20 px என்பது 1.25, 24 px என்பது 1.5, 32 px என்பது 2, 48 px என்பது 3, 64 px என்பது 4. இவை எழுத்து அளவுகோல்களிலும் இடைவெளி அமைப்புகளிலும் மிக அடிக்கடி தோன்றும் அளவுகள், அவற்றை உங்கள் முன் வைத்திருப்பது ஒரு மாற்றத்தைச் சேமிக்கிறது.

rem இல் கட்டப்பட்ட ஓர் அளவுகோல்

ஒரு சிறு rem மதிப்புத் தொகுப்பைத் தேர்ந்தெடுத்து மீண்டும் பயன்படுத்துவது ஒரு பயனுள்ள பழக்கம்: இடைவெளிக்கு 0.5, 1, 1.5, 2, 3, 4, எழுத்துக்கு 0.875, 1, 1.25, 1.5, 2. வடிவமைப்பாளர்கள் இதை ஒரு அளவுகோல் என அழைக்கிறார்கள், அது ஒரு தளத்தைப் பார்வையில் ஒருமையாக வைத்திருக்கிறது. ஒரு மாதிரி உங்களுக்கு 22 px போன்ற ஒற்றைப்படை மதிப்பைத் தரும்போது, அது 1.375 rem என்று பார்க்க மாற்றியைப் பயன்படுத்தி, உங்கள் அளவுகோலிலுள்ள அருகிலுள்ள மதிப்புக்குச் சுற்றலாமா என்று தீர்மானியுங்கள்.

இங்கே px ஐ rem ஆக மாற்றுவது எப்படி

பிக்சல் மதிப்பைத் தட்டச்சு செய்யுங்கள்

முதல் புலத்தில் பிக்சல்களில் அளவை உள்ளிடுங்கள். தசமங்கள் ஏற்கப்படுகின்றன, எனவே 14 ஐப் போலவே 13.5 px உம் வேலை செய்கிறது.

அடிப்படையைச் சரிபாருங்கள்

உங்கள் CSS வேர் அளவை மாற்றவில்லை என்றால் அதை 16 இல் விடுங்கள். மாற்றினால், மாற்றுங்கள். நீங்கள் தட்டச்சு செய்யும்போது முடிவு புதுப்பிக்கப்படுகிறது.

rem மதிப்பை நகலெடுங்கள்

எண்ணைப் படித்து, font-size: 1.5rem போல, அதற்குப் பின் அலகை எழுதி உங்கள் CSS இல் பயன்படுத்துங்கள். அலகை மறக்காதீர்கள், ஏனெனில் பெரும்பாலான பண்புகளில் வெற்று எண் வேறொன்றைக் குறிக்கிறது.

இந்த அலகுகள் எங்கிருந்து வருகின்றன

CSS பிக்சல் உங்கள் திரையின் பிக்சல் அல்ல

காட்சிகள் முன்கணிக்கக்கூடிய அடர்த்தியைக் கொண்டிருப்பதை நிறுத்தியபோது, உண்மைப் பிக்சல்களில் அளக்கப்பட்ட ஒரு பக்கம் திரைகள் கூர்மையாகும்போது சுருங்கும் ஒரு பக்கமாகியது. எனவே CSS பிக்சல் ஒரு குறிப்பு நீளமாக மறுவரையறுக்கப்பட்டது: ஒரு வசதியான வாசிப்புத் தொலைவில் காணப்படும் ஓர் அங்குலத்தின் ஏறக்குறைய 1/96. இந்தப் பக்கத்திலுள்ள மற்ற எல்லாம் அதன் மீது கட்டப்பட்டுள்ளது. em வலையைவிடப் பழையது: உலோக அச்சில் அது வார்க்கப்பட்ட ஒரு தொகுதியின் அகலம், பெரிய M இன் பெயரால் அழைக்கப்பட்டது, CSS இல் அது நடப்பிலுள்ள எழுத்துரு அளவைக் குறிக்கிறது, அதனால்தான் உறுப்புகளை உள்ளமைக்கும்போது அது மாறுகிறது. rem சரியாக அதிலிருந்து தப்பிக்கச் சேர்க்கப்பட்டது: அது வேர் உறுப்பின் em, ஒருபோதும் கூட்டுச்சேராது.

rem ஏன் உள்ளது

rem க்கு முன், உருவாக்குநர்கள் எல்லாவற்றையும் em அல்லது விழுக்காடுகளில் அளவிட்டனர், உள்ளமைந்த உறுப்புகள் ஒன்றை ஒன்று பெருக்கின: ஒரு பட்டியலுக்குள் ஒரு பட்டியலுக்குள் ஒரு பட்டியல் ஒவ்வொரு நிலையிலும் சுருங்கியது அல்லது வளர்ந்தது. rem அவர்களுக்கு ஒரு நிலையான குறிப்பைத் தந்தது, வேர், கூட்டுச்சேர்தலை நீக்கியது. இரண்டையும் ஒப்பிட விரும்பினால், px ஐ em ஆக மாற்றுங்கள் அதே பிக்சல் மதிப்பு அது அமர்ந்திருக்கும் உறுப்பைச் சார்ந்தது என்று பாருங்கள்.

நடைமுறையில் நீங்கள் rem ஐ எங்கே சந்திக்கிறீர்கள்

எழுத்து

உடல் உரை வழக்கமாக 1 rem, தலைப்புகள் 1.25 முதல் 3 rem, சிறு அச்சு 0.75 முதல் 0.875 rem. அவற்றை rem இல் எழுதுவது ஓர் உலாவி அமைப்பை மாற்றுவதன் மூலம் முழுப் பக்கத்தையும் வாசகர் பெரிதாக்க விடுகிறது.

இடைவெளியும் அமைப்பும்

rem இல் ஓரங்கள், உள்ளிடம், இடைவெளிகள் வெற்றிடத்தை எழுத்துடன் விகிதத்தில் வைக்கின்றன. உரை வளரும்போது, அதைச் சுற்றியுள்ள இடமும் வளர்கிறது, பெரிய எழுத்துகளைப் பழைய பெட்டிகளுக்குள் திணிப்பதற்குப் பதிலாக அமைப்பு சமநிலையில் இருக்கிறது.

ஊடகக் கேள்விகள்

em அல்லது rem இல் எழுதப்பட்ட முறிவுப் புள்ளிகள் வாசகரின் உரை அளவுக்குப் பதிலளிக்கின்றன, எனவே தங்கள் உரையைப் பெரிதாக்கியவருக்கு ஓர் அமைப்பு அதன் குறுகிய வடிவத்துக்கு முன்னதாக மாறுகிறது. முறிவுப் புள்ளிகளில் பிக்சல்கள் பொதுவாக இருந்தாலும், அறிந்துகொள்ளத் தகுந்த ஒரு நுட்பம் அது.

பிக்சல்களில் எதை விடுவது

மயிரிழை எல்லைகள், பெட்டி நிழல்கள், மெல்லிய ஐகான்கள் பெரும்பாலும் நிலையான பிக்சல் அளவுகளில் சிறப்பாகத் தெரிகின்றன, ஏனெனில் பெரிய உரையுடன் 0.1rem ஆக வளரும் 0.0625rem எல்லை யாருக்கும் உதவுவதில்லை. அளவிட வேண்டியவற்றுக்கு rem ஐயும் அளவிடக் கூடாதவற்றுக்குப் பிக்சல்களையும் பயன்படுத்துங்கள்.

px ஐ rem ஆக மாற்றும்போது பொறிகள்

அடிப்படை எப்போதும் 16 அல்ல என்பதை மறத்தல்

ஒரு திட்டம் html { font-size: 62.5% } ஐ அமைத்தால், அல்லது ஒரு நீர்மை வேர் அளவைப் பயன்படுத்தினால், காரணி வேறு. இந்த மாற்றி உட்பட எந்த மாற்றியிலிருந்தும் ஓர் எண்ணை நம்பும் முன் நடைத்தாளைச் சரிபாருங்கள்.

வேர் அளவையே மாற்றுதல்

வேர் அளவைப் பிக்சல்களில் அமைத்தால், வாசகரின் உலாவி அமைப்பு மேலெழுதப்படுகிறது, rem இன் நன்மை இழக்கப்படுகிறது. பயனரின் விருப்பம் மதிக்கப்படும்படி, வேரை ஒரு விழுக்காடாக அமையுங்கள், அல்லது தொடாமல் விடுங்கள்.

தன் சொந்த எழுத்துரு அளவை அமைக்கும் ஒரு கூறுக்குள் rem ஐப் பயன்படுத்துதல்

rem எப்போதும் கூறை அல்ல, வேரைக் குறிக்கிறது. 14 px எழுத்துரு அளவும் 1rem உள்ளிடமும் கொண்ட ஒரு பொத்தானின் உள்ளிடம் பொத்தானின் சொந்த உரையைப் பின்பற்றுவதில்லை. உறுப்பின் உரையைப் பின்பற்றும் இடைவெளியை விரும்பினால், அது em இன் வேலை.

திட்டமின்றி அலகுகளைக் கலத்தல்

ஓர் ஓரத்துக்கு px, அடுத்ததுக்கு rem, மூன்றாவதுக்கு em பயன்படுத்தும் ஒரு நடைத்தாளைப் பற்றிக் காரணம் காண்பது கடினம். ஒரு விதியைத் தேர்ந்தெடுங்கள்: எழுத்துக்கும் இடைவெளிக்கும் rem, எல்லைகளுக்கும் நிழல்களுக்கும் பிக்சல்கள், அதைப் பின்பற்றுங்கள்.

மாற்றும் முன் மக்கள் கேட்கும் கேள்விகள்

16 px என்பது எத்தனை rem?

ஒன்று, ஓர் இயல்பு உலாவியில். பதினாறு வகு பதினாறு என்ற அடிப்படை.

rem, px ஐவிடச் சிறந்ததா?

எழுத்துக்கும் இடைவெளிக்கும், பெரும்பாலான திட்டங்களில் அது சிறந்த தேர்வு, ஏனெனில் அது வாசகரின் அமைப்புகளை மதிக்கிறது. அளவிடக் கூடாதவற்றுக்குப் பிக்சல்கள் இன்னும் சரி.

என் முடிவு வேறொரு தளத்தின் முடிவிலிருந்து ஏன் வேறுபடுகிறது?

அநேகமாக வேறு அடிப்படை. புலத்தைச் சரிபாருங்கள்: சில கருவிகள் 10 ஐக் கருதுகின்றன, சில 16, சில 14. இந்தப் பக்கம் முடிவுக்கு அருகில் அடிப்படையைக் காட்டுகிறது.

நான் சுற்ற வேண்டுமா?

இல்லை. உலாவிகள் நீண்ட தசமங்களை ஏற்கின்றன. படிக்க எளிதாக மட்டுமே சுற்றுங்கள்.

என் எண் பதிவேற்றப்படுகிறதா?

இல்லை. கணிதம் உங்கள் உலாவியில் இயங்குகிறது, எதுவும் எங்கும் அனுப்பப்படுவதில்லை.

நான் எப்படித் திரும்பிச் செல்வது?

வகுப்பதற்குப் பதிலாகப் பெருக்கும் rem இலிருந்து px க்கு உடன்.

px ஐ rem ஆக மாற்றும்போது புத்திசாலித்தனமாகத் தேர்ந்தெடுத்தல்

திட்டத்துக்கு ஓர் அடிப்படையைத் தீர்மானித்து அதில் நில்லுங்கள்

எதைத் தேர்ந்தெடுத்தாலும், அதை ஒரு முடிவாக்கித் திட்டத்தின் ஆவணத்தில் எழுதுங்கள். அடிப்படை பற்றி உடன்படாத ஒரு குழு ஒன்றோடொன்று பொருந்தாத கூறுகளை உருவாக்குகிறது.

கடைசி நேரத்தில் அல்ல, வடிவமைப்புக் கட்டத்தில் மாற்றுங்கள்

மாதிரியைப் படிக்கும்போதே px ஐ rem ஆக மாற்றினால், அளவுகோலை வடிவமைப்புக்குள் கட்டி, ஒற்றைப்படை மதிப்புகளை முன்னதாகவே கவனிக்கிறீர்கள். முடிவில் செய்தால், அவற்றை ஒன்றோடொன்று பொருந்தாத எண்களின் குவியலாகக் கண்டுபிடிக்கிறீர்கள்.

பார்வைச்சாளர அலகுகளையும் கருதுங்கள்

திரையை நிரப்ப வேண்டிய தலைப்புகளுக்கு, px இலிருந்து vw க்கு ஓர் அளவைப் பார்வைச்சாளரத்தின் ஒரு பங்காக வெளிப்படுத்துகிறது. அது rem இலிருந்து வேறுபட்டு அளவிடுகிறது, இரண்டும் பெரும்பாலும் சேர்க்கப்படுகின்றன.

px ஐ rem ஆக மாற்றுவதை எளிதாக்கும் பழக்கங்கள்

ஒரு மாற்ற அட்டவணையைத் தலையில் வைத்திருங்கள்

16 என்ற அடிப்படையுடன், சில நங்கூரங்கள் பெரும்பாலான வேலையை உள்ளடக்குகின்றன: 4 px என்பது 0.25 rem, 8 px என்பது 0.5, 12 px என்பது 0.75, 16 px என்பது 1, 24 px என்பது 1.5, 32 px என்பது 2. ஒரு மாதிரி அவற்றுக்கு இடையே ஒரு மதிப்பைத் தரும்போது, பக்கத்தில் px ஐ rem ஆக மாற்றும் முன் மதிப்பிடலாம், உறுதிப்படுத்த மட்டுமே மாற்றியைப் பயன்படுத்தலாம். சில வாரங்களுக்குப் பிறகு பார்க்காமலே அட்டவணையை அறிவீர்கள்.

வடிவமைப்பு அமைப்பு வேலையைச் செய்யட்டும்

உங்கள் குழு spacing-2 அல்லது font-lg போன்ற வடிவமைப்புக் குறிகளை வைத்திருந்தால், அவற்றை ஒருமுறை rem இல் சேமித்து, எல்லோரும் பெயர்களைக் குறிக்கட்டும். பிறகு யாரும் மீண்டும் px ஐ rem ஆக மாற்ற வேண்டியதில்லை, அளவுகோலில் ஒரு மாற்றம் ஓரிடத்தில் செய்யப்படுகிறது. நீங்கள் குறிகளை எழுதும்போது பயன்படுத்தும் கருவி மாற்றி, அவற்றைப் பயன்படுத்தும்போது அல்ல.

பிக்சல் மதிப்பை ஒரு கருத்தில் எழுதுங்கள்

padding: 1.25rem; /* 20px */ போன்ற ஒரு வரி சில எழுத்துகளைச் செலவிட்டு அடுத்த உருவாக்குநரைக் கணிப்பானை நாடுவதிலிருந்து காக்கிறது. பின்னர் வேர் அளவு மாற்றப்பட்டால் உதவும் வகையில், நீங்கள் எந்த அடிப்படையைக் கருதினீர்கள் என்றும் அது பதிவு செய்கிறது.

மாற்றிய உலாவி அமைப்புடன் சோதியுங்கள்

ஒரு பக்கம் rem இல் கட்டப்பட்டுள்ளது என்பதற்கான நிரூபணம் அது பெரிய இயல்பு உரை அளவைத் தாங்குவது. உங்கள் உலாவியில் அமைப்பை மாற்றி, மீண்டும் ஏற்றிப் பாருங்கள். உடையும் கூறுகள் எதுவோ பிக்சல்களில் விடப்பட்டவை அல்லது நிலையான உயரம் உரையை வெட்டியவை.

தொடர்புடைய மாற்றிகள்

அதே கருவிக் குடும்பம் அருகிலுள்ள மாற்றங்களை உள்ளடக்குகிறது. பிக்சல்களுக்குத் திரும்பச் செல்ல, rem இலிருந்து px க்கு பயன்படுத்துங்கள். உறுப்புக்குச் சார்பான அளவுகளுக்கு, px இலிருந்து em க்கு மற்றும் em இலிருந்து px க்கு உள்ளன, திரைக்குச் சார்பான அளவுகளுக்கு, px இலிருந்து vw க்கு மற்றும் vw இலிருந்து px க்கு. உங்கள் வேலை அளவுகளுடன் நிறங்களையும் உள்ளடக்கினால், HEX இலிருந்து RGB க்கு, RGB இலிருந்து HEX க்கு, HEX இலிருந்து HSL க்கு நடைத்தாளின் குறியீடுகளைக் கையாள்கின்றன.

ஒரு செய்து காட்டிய எடுத்துக்காட்டு

ஒரு மாதிரி ஓர் அட்டைத் தலைப்பை 28 px இலும், அட்டை உள்ளிடத்தை 20 px இலும், அட்டைகளுக்கு இடையே 12 px இடைவெளியையும் தருகிறது, உங்கள் திட்டம் இயல்பு 16 px அடிப்படையைப் பயன்படுத்துகிறது என்று வைத்துக்கொள்ளுங்கள். நீங்கள் 28 ஐத் தட்டச்சு செய்து 1.75 rem எனப் படிக்கிறீர்கள், 20 ஐத் தட்டச்சு செய்து 1.25 rem எனப் படிக்கிறீர்கள், 12 ஐத் தட்டச்சு செய்து 0.75 rem எனப் படிக்கிறீர்கள். நடைத்தாளில் font-size: 1.75rem, padding: 1.25rem, gap: 0.75rem என்று எழுதுகிறீர்கள். உலாவி உரை அளவை 20 px க்கு உயர்த்தும் ஒரு பார்வையாளர் அதே அட்டையைக் கால் பங்கு அளவிடப்பட்டுக் காண்கிறார்: தலைப்பு 35 px, உள்ளிடம் 25 px, இடைவெளி 15 px, எல்லாம் விகிதத்தில். நீங்கள் பிக்சல்களை எழுதியிருந்தால், தலைப்பு 28 இலேயே நின்றிருக்கும், அட்டை தவறாகத் தெரிந்திருக்கும்.

ஒரு சிறு சரிபார்ப்புப் பட்டியல்

மாற்றும் முன்

உங்கள் CSS பயன்படுத்தும் அடிப்படையைக் கண்டறியுங்கள். எந்த அளவுகள் அளவிடப்பட வேண்டும், எவை கூடாது என்று தீர்மானியுங்கள்.

மாற்றும்போது

பிக்சல் மதிப்பைத் தட்டச்சு செய்து, முடிவுக்கு அருகில் காட்டப்படும் அடிப்படையைச் சரிபார்த்து, rem எண்ணை அதன் அலகுடன் நகலெடுங்கள்.

மாற்றிய பிறகு

உலாவியில் ஒரு பெரிய இயல்பு உரை அளவுடன் பக்கத்தைச் சோதித்து, தங்கள் உரையை இனி வைத்திருக்காத பெட்டிகளைத் தேடுங்கள்.

பொதுவான தவறுகள்

1 rem எப்போதும் 16 px என்று கருதுதல்

வேர் அளவை யாரும் மாற்றாதபோது மட்டுமே அது அப்படி, சில வாசகர்கள் மாற்றியுள்ளனர். அமைப்பை மற்ற அளவுகளிலும் வேலை செய்யும்படி எழுதுங்கள்.

வேர் அளவைப் பிக்சல்களில் அமைத்தல்

அது வாசகரின் தேர்வை மேலெழுதுகிறது. ஒரு விழுக்காட்டைப் பயன்படுத்துங்கள், அல்லது அமைக்காதீர்கள்.

எல்லாவற்றையும் மாற்றுதல்

எல்லா அளவுகளும் அளவிடப்படக் கூடாது. எல்லைகளையும் நிழல்களையும் பிக்சல்களில் விடுங்கள்.

உங்கள் எண்கள் உங்கள் சாதனத்திலேயே இருக்கும்

கணக்கீடு உள்ளூரில் நடக்கிறது. உங்கள் மதிப்புகள் உங்கள் சொந்த உலாவியால் பயன்படுத்தப்படுகின்றன, எதுவும் எங்கும் அனுப்பப்படுவதில்லை. பிறகு நீக்க எதுவும் இல்லை, உருவாக்க எந்தக் கணக்கும் இல்லை. px ஐ rem ஆக மாற்றும் எளிய வழி அதுவே.

சுருக்கம்

இங்கே px ஐ rem ஆக மாற்ற, பிக்சல்களில் அளவைத் தட்டச்சு செய்து, rem = px ÷ base என்ற சூத்திரத்தைப் பயன்படுத்தி உடனே rem இல் படியுங்கள். அடிப்படை உலாவியின் இயல்பான 16 px இல் தொடங்குகிறது, உங்கள் CSS உடன் பொருந்த அதை மாற்றலாம். மாற்றம் விகிதத்தை வைத்திருக்கிறது: rem இல் எழுதப்பட்ட ஓர் அமைப்பு வேர் எழுத்துரு அளவு மாறும்போது தன் வடிவத்தை வைத்திருக்கிறது. அது உங்கள் வாசகரின் அமைப்புகளை அறிய முடியாது, எனவே எண் புலத்திலுள்ள அடிப்படைக்கு மட்டுமே சரி. மாற்றிக்குக் கீழுள்ள அட்டவணையிலுள்ள பொதுவான அளவுகள், 0.5 rem இல் 8 px இலிருந்து 4 rem இல் 64 px வரை, கணிதத்தை மீண்டும் செய்வதிலிருந்து உங்களைக் காக்கின்றன. எதுவும் பதிவேற்றப்படுவதில்லை.