பதிலளிக்கக்கூடிய மற்றும் நெகிழ்வான வலை வடிவமைப்பிற்கு CSS கலப்பு அலகுகளை எவ்வாறு பயன்படுத்துவது என்பதை அறிக. இந்த வழிகாட்டி பல்வேறு அளவீட்டு வகைகளை ஆராய்ந்து உலகளாவிய வலை உருவாக்குநர்களுக்கு நடைமுறை எடுத்துக்காட்டுகளை வழங்குகிறது.
CSS கலப்பு அலகுகள்: வெவ்வேறு அளவீட்டு வகைகளை இணைக்கும் கலையில் தேர்ச்சி பெறுதல்
வலை மேம்பாட்டு உலகில், வெவ்வேறு சாதனங்கள் மற்றும் திரை அளவுகளில் தடையின்றி பொருந்தக்கூடிய தளவமைப்புகளை உருவாக்குவது மிக முக்கியம். இந்த பதிலளிப்பை அடைவதற்கான முக்கிய கருவிகளில் ஒன்று CSS கலப்பு அலகுகளின் திறமையான பயன்பாடு ஆகும். இந்த வழிகாட்டி CSS இல் கிடைக்கும் பல்வேறு அளவீட்டு வகைகளையும், உலகளாவிய பார்வையாளர்களுக்கு ஏற்ற நெகிழ்வான மற்றும் மாற்றியமைக்கக்கூடிய வலை வடிவமைப்புகளை உருவாக்க அவற்றை எவ்வாறு இணைக்கலாம் என்பதையும் ஆராய்கிறது.
CSS அளவீட்டு அலகுகளைப் புரிந்துகொள்ளுதல்
CSS ஆனது அளவீட்டு அலகுகளின் வளமான தொகுப்பை வழங்குகிறது, ஒவ்வொன்றும் அதன் சொந்த குணாதிசயங்களையும் பயன்பாட்டு நிகழ்வுகளையும் கொண்டுள்ளன. தகவலறிந்த வடிவமைப்பு முடிவுகளை எடுப்பதற்கு இந்த அலகுகளைப் புரிந்துகொள்வது முக்கியம். முதன்மை வகைகளை ஆராய்வோம்:
முழுமையான நீள அலகுகள்
முழுமையான நீள அலகுகள் நிலையானவை மற்றும் திரை அளவு அல்லது பயனரின் அமைப்புகளைப் பொருட்படுத்தாமல் ஒரே மாதிரியாக இருக்கும். அவை நன்றாக அளவிடப்படாததால், பதிலளிக்கக்கூடிய வடிவமைப்பிற்கு பொதுவாக பரிந்துரைக்கப்படுவதில்லை. இருப்பினும், நிலையான அளவு விரும்பப்படும் குறிப்பிட்ட கூறுகளுக்கு அவை பயனுள்ளதாக இருக்கும்.
- px (பிக்சல்கள்): மிகவும் பொதுவான முழுமையான அலகு. திரையில் ஒரு பிக்சலைக் குறிக்கிறது.
- pt (புள்ளிகள்): ஒரு மரபு அலகு, பெரும்பாலும் அச்சு வடிவமைப்பில் பயன்படுத்தப்படுகிறது. 1pt என்பது ஒரு அங்குலத்தின் 1/72 க்கு சமம்.
- pc (பைகாஸ்): மற்றொரு அச்சு தொடர்பான அலகு. 1pc என்பது 12 புள்ளிகளுக்கு சமம்.
- in (அங்குலங்கள்): நீளத்தின் ஒரு நிலையான அலகு.
- cm (சென்டிமீட்டர்கள்): நீளத்தின் ஒரு மெட்ரிக் அலகு.
- mm (மில்லிமீட்டர்கள்): நீளத்தின் ஒரு சிறிய மெட்ரிக் அலகு.
எடுத்துக்காட்டு:
.element {
width: 300px;
height: 100px;
}
இந்த எடுத்துக்காட்டில், திரை அளவைப் பொருட்படுத்தாமல், கூறு எப்போதும் 300 பிக்சல்கள் அகலமாகவும் 100 பிக்சல்கள் உயரமாகவும் இருக்கும்.
சார்பு நீள அலகுகள்
சார்பு அலகுகள் மற்றொரு அளவு பண்புடன் தொடர்புடையதாக வரையறுக்கப்படுகின்றன. இங்குதான் பதிலளிப்பு சிறப்பாக செயல்படுகிறது. இந்த அலகுகள் சூழலின் அடிப்படையில் அளவிடப்படுகின்றன, இது உங்கள் வடிவமைப்புகளை மேலும் மாற்றியமைக்கக்கூடியதாக ஆக்குகிறது.
- em: கூறுகளின் எழுத்துரு அளவிற்கு சார்பானது. கூறுகளின் எழுத்துரு அளவு 16px எனில், 1em என்பது 16px க்கு சமம்.
- rem (ரூட் em): மூலக் கூறுகளின் (`<html>` குறிச்சொல் பொதுவாக) எழுத்துரு அளவிற்கு சார்பானது. இது முழுப் பக்கத்திலும் அளவிடுவதற்கான ஒரு நிலையான அடிப்படையை வழங்குகிறது.
- %: பெற்றோர் கூறுகளின் அளவிற்கு சார்பானது. எடுத்துக்காட்டாக, 50% அகலம் என்பது கூறு அதன் பெற்றோர் அகலத்தில் பாதியை எடுத்துக்கொள்ளும்.
- ch: கூறுகளின் எழுத்துருவில் உள்ள "0" (பூஜ்ஜியம்) எழுத்தின் அகலத்திற்கு சார்பானது. முதன்மையாக உரை அடிப்படையிலான அகலங்களை வரையறுக்கப் பயன்படுத்தப்படுகிறது.
- vw (வியூபோர்ட் அகலம்): வியூபோர்ட்டின் அகலத்திற்கு சார்பானது. 1vw என்பது வியூபோர்ட் அகலத்தில் 1% ஆகும்.
- vh (வியூபோர்ட் உயரம்): வியூபோர்ட்டின் உயரத்திற்கு சார்பானது. 1vh என்பது வியூபோர்ட் உயரத்தில் 1% ஆகும்.
- vmin (வியூபோர்ட் குறைந்தபட்சம்): வியூபோர்ட்டின் அகலம் மற்றும் உயரத்தில் சிறியதற்கு சார்பானது.
- vmax (வியூபோர்ட் அதிகபட்சம்): வியூபோர்ட்டின் அகலம் மற்றும் உயரத்தில் பெரியதற்கு சார்பானது.
எடுத்துக்காட்டுகள்:
/* Using em */
.element {
font-size: 16px; /* Base font size */
width: 10em; /* Width is 10 times the font size (160px) */
}
/* Using rem */
html {
font-size: 16px; /* Root font size */
}
.element {
width: 10rem; /* Width is 10 times the root font size (160px) */
}
/* Using % */
.parent {
width: 500px;
}
.child {
width: 50%; /* Child takes 50% of parent's width (250px) */
}
பதிலளிக்கக்கூடிய வடிவமைப்புகளுக்கு அலகுகளை இணைத்தல்
CSS-இன் உண்மையான சக்தி, உகந்த பதிலளிப்பை அடைய வெவ்வேறு அலகுகளை இணைப்பதில் உள்ளது. இதோ சில உத்திகள்:
1. எழுத்துரு அளவுகள் மற்றும் இடைவெளிக்கு em அல்லது rem பயன்படுத்துதல்
இது அளவிடக்கூடிய உரை மற்றும் சீரான இடைவெளியை உருவாக்குவதற்கான ஒரு அடிப்படை நுட்பமாகும். `em` அல்லது `rem` ஐப் பயன்படுத்துவது, ஒரு ஒற்றை அடிப்படை மதிப்பை (ரூட் எழுத்துரு அளவு அல்லது ஒரு கூறுகளின் எழுத்துரு அளவு) மாற்றுவதன் மூலம் உங்கள் வடிவமைப்பின் ஒட்டுமொத்த அளவை எளிதாக சரிசெய்ய உங்களை அனுமதிக்கிறது. வெவ்வேறு எழுத்துரு அளவு விருப்பங்களைக் கொண்ட பயனர்களுக்கு இடமளிக்க அல்லது உங்கள் வடிவமைப்பை மேலும் அணுகக்கூடியதாக மாற்றுவதற்கு இது மிகவும் பயனுள்ளதாக இருக்கும்.
எடுத்துக்காட்டு:
html {
font-size: 16px; /* Default base font size */
}
p {
font-size: 1rem; /* Paragraph font size (16px) */
margin-bottom: 1rem; /* Bottom margin (16px) */
}
@media (max-width: 768px) {
html {
font-size: 14px; /* Reduce base font size for smaller screens */
}
}
இந்த எடுத்துக்காட்டில், எழுத்துரு அளவு மற்றும் விளிம்புகள் ரூட் எழுத்துரு அளவிற்கு சார்பானவை. மீடியா வினவலில் ரூட் எழுத்துரு அளவை மாற்றுவது சிறிய திரைகளில் உரை மற்றும் இடைவெளியை தானாகவே அளவிடுகிறது.
2. அகலங்கள் மற்றும் உயரங்களுக்கு சதவீதங்களைப் பயன்படுத்துதல்
கிடைக்கக்கூடிய இடத்திற்கு ஏற்றவாறு கூறுகள் மாறும் திரவ தளவமைப்புகளை உருவாக்க சதவீதங்கள் சிறந்தவை. கட்டம் அமைப்புகளை உருவாக்குவதற்கும், வியூபோர்ட் மாறும்போது கூறுகள் அவற்றின் விகிதாச்சாரத்தை பராமரிப்பதை உறுதி செய்வதற்கும் அவை குறிப்பாக பயனுள்ளதாக இருக்கும்.
எடுத்துக்காட்டு:
.container {
width: 80%; /* Container takes 80% of the parent's width */
margin: 0 auto; /* Center the container */
}
.column {
width: 50%; /* Each column takes 50% of the container's width */
float: left; /* Simple two-column layout */
}
இந்த குறியீடு இரண்டு-நெடுவரிசை தளவமைப்பை உருவாக்குகிறது, அங்கு நெடுவரிசைகள் `container` உடன் விகிதாசாரமாக அளவை மாற்றுகின்றன.
3. சதவீதங்களை min-width/max-width உடன் இணைத்தல்
கூறுகள் மிகவும் குறுகலாகவோ அல்லது அகலமாகவோ மாறுவதைத் தடுக்க, சதவீதங்களை `min-width` மற்றும் `max-width` உடன் இணைக்கவும். இந்த அணுகுமுறை பரந்த அளவிலான திரை அளவுகளில் வாசிப்புத்திறன் மற்றும் காட்சி முறையீட்டைப் பராமரிக்க உதவுகிறது. இது அணுகல்தன்மைக்கு முக்கியமானது; எடுத்துக்காட்டாக, உரை மிகவும் குறுகலாகி வாசிக்க கடினமாகாமல் இருப்பதை உறுதி செய்கிறது.
எடுத்துக்காட்டு:
.element {
width: 80%;
max-width: 1200px; /* Prevents the element from exceeding 1200px */
min-width: 320px; /* Prevents the element from being narrower than 320px */
margin: 0 auto;
}
4. டைனமிக் அளவிடுதலுக்கு வியூபோர்ட் அலகுகளைப் பயன்படுத்துதல்
வியூபோர்ட் அலகுகள் (`vw`, `vh`, `vmin`, மற்றும் `vmax`) வியூபோர்ட்டின் பரிமாணங்களுடன் தொடர்புடையதாக அளவிடப்படும் கூறுகளை உருவாக்க நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருக்கும். முழுத்திரை கூறுகள், அச்சுக்கலை மற்றும் பதிலளிக்கக்கூடிய படங்களுக்கு அவை குறிப்பாக பயனுள்ளதாக இருக்கும்.
எடுத்துக்காட்டு:
.hero {
width: 100vw; /* Full viewport width */
height: 80vh; /* 80% of viewport height */
}
h1 {
font-size: 5vw; /* Font size scales with viewport width */
}
5. விளிம்பு மற்றும் பேடிங்கிற்கான கலப்பு அலகுகள்
பதிலளிப்பைப் பராமரிக்கும் போது விளிம்புகள் மற்றும் பேடிங்கிற்கான `px` ஐ சார்பு அலகுகளுடன் இணைப்பது இடைவெளி மீது நுணுக்கமான கட்டுப்பாட்டை வழங்க முடியும். எடுத்துக்காட்டாக, சதவீத அடிப்படையிலான விளிம்புடன் ஒரு நிலையான அளவு பேடிங்கைப் பயன்படுத்தலாம்.
எடுத்துக்காட்டு:
.element {
padding: 10px 5%; /* 10px top/bottom, 5% left/right of parent's width */
margin-bottom: 1rem;
}
சிறந்த நடைமுறைகள் மற்றும் கருத்தில் கொள்ள வேண்டியவை
CSS கலப்பு அலகுகளுடன் பணிபுரியும்போது மனதில் கொள்ள வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:
- முடிந்தவரை `em` ஐ விட `rem` க்கு முன்னுரிமை கொடுங்கள்: `rem` அலகுகள் உங்கள் முழு வடிவமைப்பையும் அளவிடுவதற்கான ஒரு நிலையான அடிப்படையை வழங்குகின்றன. `em` அலகுகள் பயனுள்ளவை, ஆனால் அவை ஆழமாக பதிக்கப்பட்டிருந்தால் நிர்வகிப்பது கடினமாக இருக்கும்.
- மீடியா வினவல்களை நியாயமாகப் பயன்படுத்துங்கள்: வெவ்வேறு திரை அளவுகளுக்கு உங்கள் வடிவமைப்பை மாற்றியமைக்க மீடியா வினவல்கள் அவசியம். இருப்பினும், அவற்றை அதிகமாகப் பயன்படுத்துவது சிக்கலான மற்றும் பராமரிக்க கடினமான குறியீட்டிற்கு வழிவகுக்கும். மொபைல்-முதல் அணுகுமுறையை இலக்காகக் கொண்டு, குறிப்பிட்ட பிரேக் பாயிண்ட்களை நிவர்த்தி செய்ய மீடியா வினவல்களைப் பயன்படுத்தவும்.
- பல்வேறு சாதனங்கள் மற்றும் உலாவிகளில் சோதிக்கவும்: சீரான ரெண்டரிங்கை உறுதிசெய்ய உங்கள் வடிவமைப்புகளை வெவ்வேறு சாதனங்கள், உலாவிகள் மற்றும் இயக்க முறைமைகளில் எப்போதும் சோதிக்கவும். உங்கள் வடிவமைப்பு அனைவராலும் பயன்படுத்தக்கூடியதா என்பதை உறுதிப்படுத்த அணுகல்தன்மை சோதனையும் முக்கியமானது.
- உள்ளடக்க நீளத்தைக் கவனியுங்கள்: சதவீதங்களைப் பயன்படுத்தும்போது, உள்ளடக்க நீளத்தை மனதில் கொள்ளுங்கள். நீண்ட உரையின் தொகுதிகள் வாசிப்புத்திறனைப் பராமரிக்க `max-width` ஆல் வரையறுக்கப்பட வேண்டியிருக்கலாம்.
- உங்கள் தளவமைப்பைத் திட்டமிடுங்கள்: CSS எழுதுவதற்கு முன், உங்கள் தளவமைப்பையும், வெவ்வேறு திரை அளவுகளுக்கு கூறுகள் எவ்வாறு பதிலளிக்கும் என்பதையும் திட்டமிடுங்கள். இது பயன்படுத்த சிறந்த அளவீட்டு அலகுகளைத் தீர்மானிக்க உதவும்.
- ஒரு நிலையான வடிவமைப்பு அமைப்பைப் பராமரிக்கவும்: உங்கள் இணையதளம் முழுவதும் ஒரு ஒத்திசைவான தோற்றத்தையும் உணர்வையும் உறுதிப்படுத்த, ஒரு நிலையான இடைவெளி மற்றும் அளவு மதிப்புகளை (எ.கா., விளிம்புகள் மற்றும் பேடிங்கிற்கான வரையறுக்கப்பட்ட ரெம் மதிப்புகளுடன் கூடிய வடிவமைப்பு அமைப்பைப் பயன்படுத்துதல்) வரையறுக்கவும். பெரிய அணிகள் அல்லது சிக்கலான திட்டங்களுக்கு இது மிகவும் முக்கியம்.
எடுத்துக்காட்டுகள் மற்றும் சர்வதேச பயன்பாடுகள்
உலகெங்கிலும் உள்ள பல்வேறு சூழல்களில் கலப்பு அலகுகள் எவ்வாறு பயன்படுத்தப்படுகின்றன என்பதற்கான சில நிஜ உலக எடுத்துக்காட்டுகளைப் பார்ப்போம். இந்த எடுத்துக்காட்டுகள் பரவலாகப் பொருந்தக்கூடியதாகவும், குறிப்பிட்ட கலாச்சார சார்புகளைத் தவிர்க்கும் வகையிலும் வடிவமைக்கப்பட்டுள்ளன.
எடுத்துக்காட்டு 1: ஒரு பதிலளிக்கக்கூடிய கட்டுரை அட்டை
செய்திக் கட்டுரைகளைக் கொண்ட ஒரு வலைத்தளத்தை கற்பனை செய்து பாருங்கள். ஒவ்வொரு கட்டுரை அட்டையும் மொபைல் மற்றும் டெஸ்க்டாப் சாதனங்களில் அழகாக இருக்க வேண்டும் என்று நாங்கள் விரும்புகிறோம்.
.article-card {
width: 90%; /* Takes 90% of the parent's width */
margin: 1rem auto; /* 1rem top/bottom, auto left/right for centering */
padding: 1.5rem; /* Adds padding around the content */
border: 1px solid #ccc; /* Simple border for visual separation */
}
.article-card img {
width: 100%; /* Image takes 100% of the card's width */
height: auto; /* Maintain aspect ratio */
}
@media (min-width: 768px) {
.article-card {
width: 70%; /* Larger card on desktop */
}
}
இந்த எடுத்துக்காட்டில், அட்டையின் அகலம் ஒரு சதவீதமாகும், இது திரை அளவிற்கு ஏற்ப மாற்றியமைக்க அனுமதிக்கிறது. விளிம்பு மற்றும் பேடிங் அளவிடுதலுக்காக `rem` அலகுகளைப் பயன்படுத்துகின்றன, இது நிலைத்தன்மையை உறுதி செய்கிறது. படமும் பதிலளிக்கக்கூடிய வகையில் அளவிடப்படுகிறது.
எடுத்துக்காட்டு 2: ஒரு வழிசெலுத்தல் பட்டி
சர்வதேச வலை வடிவமைப்பில் வெவ்வேறு திரை அளவுகளுக்கு ஏற்றவாறு ஒரு வழிசெலுத்தல் பட்டியை உருவாக்குவது ஒரு பொதுவான பணியாகும். இந்த எடுத்துக்காட்டு சார்பு மற்றும் முழுமையான அலகுகளின் கலவையைப் பயன்படுத்துகிறது.
.navbar {
background-color: #333;
padding: 1rem 0; /* Use rem units for padding */
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.navbar li {
display: inline-block; /* Display links horizontally */
margin: 0 1rem; /* Use rem for spacing */
}
.navbar a {
color: white;
text-decoration: none;
font-size: 1rem; /* Use rem for font size */
padding: 0.5rem 1rem; /* Use rem for padding around text */
}
@media (max-width: 768px) {
.navbar ul {
text-align: left; /* Left-align on smaller screens */
}
.navbar li {
display: block; /* Stack links vertically on smaller screens */
margin: 0.5rem 0; /* Add spacing between links */
}
}
`rem` அலகுகள் ஒரு அளவிடக்கூடிய மற்றும் நிலையான மெனுவை உருவாக்குகின்றன. மீடியா வினவல் சிறிய திரைகளில் மெனுவை ஒரு செங்குத்து பட்டியலாக மாற்றுகிறது.
எடுத்துக்காட்டு 3: ஒரு நெகிழ்வான கட்டம் தளவமைப்பு
கட்டங்கள் பல வலைத்தள தளவமைப்புகளின் முதுகெலும்பாகும். இந்த எடுத்துக்காட்டு சதவீதங்களைப் பயன்படுத்தி ஒரு அடிப்படை கட்டத்தைக் காட்டுகிறது.
.grid-container {
display: flex; /* Enables flexbox for grid layout */
flex-wrap: wrap; /* Allows items to wrap to the next line */
padding: 1rem;
}
.grid-item {
width: calc(50% - 2rem); /* Each item takes 50% of the container width - 2rem (for spacing) */
margin: 1rem; /* Add margin for spacing between the items */
padding: 1rem;
border: 1px solid #eee;
box-sizing: border-box; /* Ensures padding is included in the width calculation */
}
@media (max-width: 768px) {
.grid-item {
width: calc(100% - 2rem); /* Full width on smaller screens */
}
}
இந்த குறியீடு ஒரு பதிலளிக்கக்கூடிய கட்டத்தை உருவாக்குகிறது. சிறிய திரைகளில், பொருட்கள் கிடைக்கக்கூடிய அகலத்தில் 100% ஐ ஆக்கிரமிப்பதன் மூலம் செங்குத்தாக அடுக்கப்படுகின்றன.
மேம்பட்ட நுட்பங்கள் மற்றும் கருத்தில் கொள்ள வேண்டியவை
டைனமிக் கணக்கீடுகளுக்கு `calc()` பயன்படுத்துதல்
`calc()` செயல்பாடு உங்கள் CSS க்குள் கணக்கீடுகளைச் செய்ய உங்களை அனுமதிக்கிறது. இது சிக்கலான தளவமைப்புகளுக்கு நம்பமுடியாத அளவிற்கு சக்தி வாய்ந்தது. `calc()` க்குள் பல்வேறு அலகுகளை நீங்கள் இணைக்கலாம்.
எடுத்துக்காட்டு:
.element {
width: calc(100% - 20px); /* Width is 100% of parent, minus 20 pixels */
}
.element-2 {
margin-left: calc(10px + 1em);
}
இது மற்ற காரணிகளின் அடிப்படையில் கூறுகளின் அளவை வரையறுப்பதில் உங்களுக்கு அதிக நெகிழ்வுத்தன்மையை அளிக்கிறது.
வியூபோர்ட் அலகுகள் மற்றும் டைனமிக் அச்சுக்கலை
வியூபோர்ட் அலகுகள் திரை அளவிற்கு ஏற்ப சரிசெய்யும் உண்மையான டைனமிக் அச்சுக்கலையை உருவாக்க முடியும்.
எடுத்துக்காட்டு:
h1 {
font-size: 8vw; /* Font size scales with viewport width */
}
p {
font-size: 2.5vw; /* Body text adjusts to screen size */
}
இது உங்கள் தலைப்புகள் மற்றும் உரை சாதனத்தைப் பொருட்படுத்தாமல் வாசிக்கக்கூடியதாக இருப்பதை உறுதி செய்கிறது.
அணுகல்தன்மை கருத்தில் கொள்ள வேண்டியவை
கலப்பு அலகுகளுடன் பணிபுரியும்போது, எப்போதும் அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள். உங்கள் வடிவமைப்புகள் குறைபாடுகள் உள்ள பயனர்களுக்கு அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும். இதில் அடங்கும்:
- போதுமான வண்ண வேறுபாடு: உரை மற்றும் பின்னணி வண்ணங்களுக்கு இடையில் போதுமான வேறுபாடு இருப்பதை உறுதி செய்யவும்.
- சரியான தலைப்பு அமைப்பு: உங்கள் உள்ளடக்கத்தை கட்டமைக்க தலைப்பு குறிச்சொற்களை (h1-h6) சரியாகப் பயன்படுத்தவும்.
- படங்களுக்கான மாற்று உரை: அனைத்து படங்களுக்கும் விளக்கமான மாற்று உரையை வழங்கவும்.
- விசைப்பலகை வழிசெலுத்தல்: உங்கள் வலைத்தளத்தை விசைப்பலகை மூலம் செல்லக்கூடியதாக இருப்பதை உறுதி செய்யவும்.
- ஸ்கிரீன் ரீடர்களுடன் சோதனை செய்தல்: இணக்கத்தன்மையை உறுதிப்படுத்த உங்கள் வலைத்தளத்தை ஸ்கிரீன் ரீடர்களுடன் சோதிக்கவும்.
- எழுத்துரு அளவு சரிசெய்தல்: பயனர்கள் தங்கள் உலாவிகளில் இயல்புநிலை எழுத்துரு அளவுகளை மாற்றக்கூடும் என்பதைக் கவனியுங்கள். உங்கள் வடிவமைப்பு இந்த மாற்றங்களுக்கு அழகாக மாற்றியமைக்க வேண்டும், இதற்கு `rem` அலகுகள் உதவுகின்றன.
செயல்திறன் மேம்படுத்தல்
ஒரு நல்ல பயனர் அனுபவத்திற்கு, குறிப்பாக மொபைல் சாதனங்களில், செயல்திறனை மேம்படுத்துவது மிகவும் முக்கியம். சில முக்கிய செயல்திறன் கருத்தில் கொள்ள வேண்டியவை:
- சிக்கலான கணக்கீடுகளின் பயன்பாட்டைக் குறைக்கவும்: `calc()` இன் அதிகப்படியான பயன்பாடு செயல்திறனை பாதிக்கலாம். அதை நியாயமாகப் பயன்படுத்தவும்.
- மீடியா வினவல்களை அதிகமாகப் பயன்படுத்துவதைத் தவிர்க்கவும்: அதிகப்படியான மீடியா வினவல்கள் CSS கோப்பின் அளவை அதிகரிக்கக்கூடும்.
- படங்களை மேம்படுத்தவும்: சுமை நேரங்களைக் குறைக்க சரியான அளவு மற்றும் சுருக்கப்பட்ட படங்களைப் பயன்படுத்தவும்.
- படங்களை சோம்பேறித்தனமாக ஏற்றவும்: ஆரம்ப பக்க சுமை நேரத்தை மேம்படுத்த, குறிப்பாக மடிப்புக்கு கீழே உள்ள படங்களை சோம்பேறித்தனமாக ஏற்றுவதைக் கருத்தில் கொள்ளுங்கள்.
முடிவுரை
பதிலளிக்கக்கூடிய மற்றும் மாற்றியமைக்கக்கூடிய வடிவமைப்புகளை உருவாக்க விரும்பும் எந்தவொரு வலை உருவாக்குநருக்கும் CSS கலப்பு அலகுகளில் தேர்ச்சி பெறுவது ஒரு அடிப்படை திறமையாகும். பல்வேறு அலகு வகைகளையும் அவற்றை எவ்வாறு திறம்பட இணைப்பது என்பதையும் புரிந்துகொள்வதன் மூலம், பல்வேறு தேவைகள் மற்றும் விருப்பங்களைக் கொண்ட உலகளாவிய பார்வையாளர்களுக்கு இடமளிக்கும் வகையில், பரந்த அளவிலான சாதனங்கள் மற்றும் திரை அளவுகளில் அழகாக தோற்றமளிக்கும் மற்றும் தடையின்றி செயல்படும் வலைத்தளங்களை நீங்கள் உருவாக்கலாம். அணுகல்தன்மைக்கு முன்னுரிமை அளிக்க நினைவில் கொள்ளுங்கள், முழுமையாக சோதிக்கவும், மற்றும் சிறந்த பயனர் அனுபவத்தை அடைய உங்கள் அணுகுமுறையை தொடர்ந்து செம்மைப்படுத்தவும். இந்த வழிகாட்டியில் உள்ளடக்கப்பட்டுள்ள நுட்பங்கள், இருப்பிடம் அல்லது கலாச்சார பின்னணியைப் பொருட்படுத்தாமல், ஒரு நவீன மற்றும் பயனர் நட்பு வலை இருப்பை உருவாக்குவதற்கு முக்கியமானவை.