CSS கன்டெய்னர் குவரி நீள அலகுகள்: எலிமென்ட்-சார்ந்த அளவிடுதலில் தேர்ச்சி பெறுதல்

தொடர்ந்து மாறிவரும் வலை மேம்பாட்டுத் துறையில், ரெஸ்பான்சிவ் டிசைன் பலதரப்பட்ட சாதனங்களில் சிறப்பான பயனர் அனுபவங்களை உருவாக்குவதில் ஒரு மூலக்கல்லாக விளங்குகிறது. வியூபோர்ட்டை விட, எலிமென்ட்களின் கன்டெய்னர் எலிமென்ட்களின் பரிமாணங்களை அடிப்படையாகக் கொண்டு, எலிமென்ட் ஸ்டைலிங்கில் நுணுக்கமான கட்டுப்பாட்டை அடைவதற்கான ஒரு சக்திவாய்ந்த கருவியாக CSS கன்டெய்னர் குவரிகள் உருவாகியுள்ளன. இந்த அணுகுமுறையின் மையமாக கன்டெய்னர் குவரி நீள அலகுகள் (CQLUs) உள்ளன, இது டைனமிக் லேஅவுட்களுக்கு தடையின்றி பொருந்தக்கூடிய எலிமென்ட்-சார்ந்த அளவிடுதலை செயல்படுத்துகிறது.

கன்டெய்னர் குவரிகளைப் புரிந்துகொள்ளுதல்

CQLUs-க்குள் செல்வதற்கு முன், கன்டெய்னர் குவரிகளின் அடிப்படைக் கருத்தைப் புரிந்துகொள்வது அவசியம். வியூபோர்ட்டின் பண்புகளுக்குப் பதிலளிக்கும் மீடியா குவரிகளைப் போலல்லாமல், கன்டெய்னர் குவரிகள் எலிமென்ட்களை அவற்றின் அருகிலுள்ள கன்டெய்னர் எலிமென்ட்டின் அளவின் அடிப்படையில் தங்கள் ஸ்டைலிங்கை மாற்றியமைக்க அனுமதிக்கின்றன. இது மேலும் உள்ளூர்மயமாக்கப்பட்ட மற்றும் நெகிழ்வான ரெஸ்பான்சிவ்னஸை உருவாக்குகிறது, இது கூறுகள் பல்வேறு சூழல்களில் வித்தியாசமாக நடந்துகொள்ள உதவுகிறது.

ஒரு கன்டெய்னரை நிறுவ, நீங்கள் ஒரு பெற்றோர் எலிமென்ட்டில் container-type பண்பைப் பயன்படுத்துகிறீர்கள். container-type-ஐ size, inline-size, அல்லது normal என அமைக்கலாம். size கன்டெய்னரின் அகலம் மற்றும் உயரம் ஆகிய இரண்டின் மாற்றங்களுக்கும் பதிலளிக்கிறது. inline-size அகலத்திற்கு மட்டுமே பதிலளிக்கிறது, மற்றும் normal என்றால் அந்த எலிமென்ட் ஒரு குவரி கன்டெய்னர் அல்ல.

உதாரணம்:

.container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .element {
    /* கன்டெய்னர் குறைந்தபட்சம் 400px அகலத்தில் இருக்கும்போது பயன்படுத்தப்படும் ஸ்டைல்கள் */
  }
}

கன்டெய்னர் குவரி நீள அலகுகள் (CQLUs) அறிமுகம்

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

கிடைக்கக்கூடிய CQLUs-களின் ஒரு கண்ணோட்டம் இதோ:

• cqw: கன்டெய்னரின் அகலத்தில் 1%-ஐ குறிக்கிறது.
• cqh: கன்டெய்னரின் உயரத்தில் 1%-ஐ குறிக்கிறது.
• cqi: கன்டெய்னரின் இன்லைன் அளவின் 1%-ஐ குறிக்கிறது, இது கிடைமட்ட எழுத்து முறையில் அகலமாகவும், செங்குத்து எழுத்து முறையில் உயரமாகவும் இருக்கும்.
• cqb: கன்டெய்னரின் பிளாக் அளவின் 1%-ஐ குறிக்கிறது, இது கிடைமட்ட எழுத்து முறையில் உயரமாகவும், செங்குத்து எழுத்து முறையில் அகலமாகவும் இருக்கும்.
• cqmin: cqi மற்றும் cqb ஆகியவற்றுக்கு இடையேயான சிறிய மதிப்பைக் குறிக்கிறது.
• cqmax: cqi மற்றும் cqb ஆகியவற்றுக்கு இடையேயான பெரிய மதிப்பைக் குறிக்கிறது.

இந்த அலகுகள் எலிமென்ட்களின் அளவை அவற்றின் கன்டெய்னர்களைப் பொறுத்து நுணுக்கமாகக் கட்டுப்படுத்த உதவுகின்றன, இதனால் வெவ்வேறு சூழல்களுக்கு ஏற்ப மாறும் தகவமைக்கும் லேஅவுட்களை உருவாக்க முடியும். i மற்றும் b வகைகள், எழுத்து முறைகள் மாறக்கூடிய சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n) ஆகியவற்றை ஆதரிக்க குறிப்பாக பயனுள்ளதாக இருக்கும்.

CQLUs-களின் நடைமுறை எடுத்துக்காட்டுகள்

டைனமிக் மற்றும் தகவமைக்கக்கூடிய லேஅவுட்களை உருவாக்க CQLUs-களை எப்படிப் பயன்படுத்தலாம் என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளைப் பார்ப்போம்.

உதாரணம் 1: ரெஸ்பான்சிவ் கார்டு லேஅவுட்

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

.card-container {
  container-type: inline-size;
  width: 300px; /* ஒரு இயல்புநிலை அகலத்தை அமைக்கவும் */
}

.card-title {
  font-size: 5cqw; /* கன்டெய்னர் அகலத்தைச் சார்ந்த எழுத்துரு அளவு */
}

.card-content {
  padding: 2cqw; /* கன்டெய்னர் அகலத்தைச் சார்ந்த பேடிங் */
}

@container (min-width: 400px) {
  .card-title {
    font-size: 4cqw; /* பெரிய கன்டெய்னர்களுக்கு எழுத்துரு அளவை சரிசெய்யவும் */
  }
}

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

உதாரணம் 2: தகவமைக்கும் நேவிகேஷன் மெனு

கிடைக்கக்கூடிய இடத்தைப் பொறுத்து தங்கள் லேஅவுட்டை சரிசெய்யும் தகவமைக்கும் நேவிகேஷன் மெனுக்களை உருவாக்கவும் CQLUs-களைப் பயன்படுத்தலாம். உதாரணமாக, மெனு உருப்படிகளுக்கு இடையிலான இடைவெளியைக் கட்டுப்படுத்த நாம் cqw-ஐப் பயன்படுத்தலாம்.

.nav-container {
  container-type: inline-size;
  display: flex;
  justify-content: space-between;
}

.nav-item {
  margin-right: 2cqw; /* கன்டெய்னர் அகலத்தைச் சார்ந்த இடைவெளி */
}

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

உதாரணம் 3: டைனமிக் பட அளவிடுதல்

ஒரு கன்டெய்னருக்குள் படங்களின் அளவைக் கட்டுப்படுத்த CQLUs மிகவும் பயனுள்ளதாக இருக்கும். ஒரு குறிப்பிட்ட பகுதிக்குள் விகிதாசாரமாகப் பொருந்த வேண்டிய படங்களைக் கையாளும்போது இது குறிப்பாக உதவியாக இருக்கும்.

.image-container {
  container-type: inline-size;
  width: 500px;
}

.image-container img {
  width: 100cqw; /* கன்டெய்னர் அகலத்தைச் சார்ந்த படத்தின் அகலம் */
  height: auto;
}

இந்த நிலையில், படத்தின் அகலம் எப்போதும் கன்டெய்னரின் அகலத்தில் 100% ஆக இருக்கும், இது கிடைக்கும் இடத்தை வழிந்து செல்லாமல் நிரப்புவதை உறுதி செய்கிறது. height: auto; பண்பு படத்தின் விகிதத்தைத் தக்க வைத்துக் கொள்கிறது.

உதாரணம் 4: வெவ்வேறு எழுத்து முறைகளை ஆதரித்தல் (i18n/l10n)

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

.text-container {
  container-type: size;
  writing-mode: horizontal-tb; /* இயல்புநிலை எழுத்து முறை */
  width: 400px;
  height: 200px;
}

.text-element {
  font-size: 4cqb; /* பிளாக் அளவைச் சார்ந்த எழுத்துரு அளவு */
  padding: 2cqi; /* இன்லைன் அளவைச் சார்ந்த பேடிங் */
}

@media (orientation: portrait) {
  .text-container {
    writing-mode: vertical-rl; /* செங்குத்து எழுத்து முறை */
  }
}

இங்கே, எழுத்துரு அளவு பிளாக் அளவுக்கு (கிடைமட்டத்தில் உயரம், செங்குத்தில் அகலம்) மற்றும் பேடிங் இன்லைன் அளவுக்கு (கிடைமட்டத்தில் அகலம், செங்குத்தில் உயரம்) பிணைக்கப்பட்டுள்ளது. இது எழுத்து முறையைப் பொருட்படுத்தாமல், உரை படிக்கக்கூடியதாகவும், லேஅவுட் சீராகவும் இருப்பதை உறுதி செய்கிறது.

உதாரணம் 5: cqmin மற்றும் cqmax பயன்படுத்துதல்

அளவிடுதலுக்காக கன்டெய்னரின் சிறிய அல்லது பெரிய பரிமாணத்தைத் தேர்ந்தெடுக்க விரும்பும்போது இந்த அலகுகள் பயனுள்ளதாக இருக்கும். உதாரணமாக, ஒரு வட்ட வடிவ எலிமென்டை உருவாக்க, அது எப்போதும் கன்டெய்னருக்குள் வழிந்து செல்லாமல் பொருந்த வேண்டும் என்றால், அகலம் மற்றும் உயரம் இரண்டிற்கும் cqmin-ஐப் பயன்படுத்தலாம்.

.circle-container {
  container-type: size;
  width: 300px;
  height: 200px;
}

.circle {
  width: 100cqmin;
  height: 100cqmin;
  border-radius: 50%;
  background-color: #ccc;
}

இந்த வட்டம் எப்போதும் ஒரு சரியான வட்டமாக இருக்கும் மற்றும் அதன் கன்டெய்னரின் மிகச்சிறிய பரிமாணத்திற்கு ஏற்ப அளவிடப்படும்.

CQLUs-களைப் பயன்படுத்துவதன் நன்மைகள்

CQLUs-களைப் பயன்படுத்துவதன் நன்மைகள் பல உள்ளன, மேலும் அவை வலுவான மற்றும் பராமரிக்கக்கூடிய ரெஸ்பான்சிவ் டிசைன்களை உருவாக்குவதில் குறிப்பிடத்தக்க பங்களிக்கின்றன:

• நுணுக்கமான கட்டுப்பாடு: CQLUs எலிமென்ட் அளவிடுதலில் நுணுக்கமான கட்டுப்பாட்டை வழங்குகின்றன, இது வெவ்வேறு சூழல்களுக்குத் துல்லியமாகப் பொருந்தக்கூடிய லேஅவுட்களை உருவாக்க உங்களை அனுமதிக்கிறது.
• டைனமிக் தகவமைப்பு: எலிமென்ட்கள் தங்கள் கன்டெய்னரின் பரிமாணங்களின் அடிப்படையில் தானாகவே தங்கள் அளவை சரிசெய்கின்றன, இது பல்வேறு திரை அளவுகள் மற்றும் சாதனங்களில் சீரான மற்றும் பார்வைக்கு ஈர்க்கும் லேஅவுட்களை உறுதி செய்கிறது.
• மேம்படுத்தப்பட்ட பராமரிப்பு: எலிமென்ட் ஸ்டைலிங்கை வியூபோர்ட் பரிமாணங்களிலிருந்து பிரிப்பதன் மூலம், CQLUs ரெஸ்பான்சிவ் டிசைன்களை உருவாக்குவதையும் பராமரிப்பதையும் எளிதாக்குகின்றன. கன்டெய்னரின் அளவில் ஏற்படும் மாற்றங்கள் தானாகவே அதன் பிள்ளைகளுக்குப் பரவுகின்றன, இது கைமுறை சரிசெய்தல்களின் தேவையைக் குறைக்கிறது.
• கூறு மறுபயன்பாடு: CQLUs-களுடன் ஸ்டைல் செய்யப்பட்ட கூறுகள் உங்கள் பயன்பாட்டின் வெவ்வேறு பகுதிகளில் அதிக மறுபயன்பாடு மற்றும் எடுத்துச் செல்லக்கூடியவையாக மாறுகின்றன. குறிப்பிட்ட வியூபோர்ட் அடிப்படையிலான மீடியா குவரிகள் தேவையில்லாமல், அவை வைக்கப்பட்டுள்ள கன்டெய்னரின் அடிப்படையில் தங்கள் தோற்றத்தை மாற்றியமைக்க முடியும்.
• மேம்பட்ட பயனர் அனுபவம்: டைனமிக் அளவிடுதல் ஒரு மெருகூட்டப்பட்ட மற்றும் ரெஸ்பான்சிவ் பயனர் அனுபவத்திற்கு பங்களிக்கிறது, சாதனம் அல்லது திரை அளவைப் பொருட்படுத்தாமல் எலிமென்ட்கள் எப்போதும் பொருத்தமாக அளவிடப்பட்டு நிலைநிறுத்தப்படுவதை உறுதி செய்கிறது.
• எளிதாக்கப்பட்ட சர்வதேசமயமாக்கல்: cqi மற்றும் cqb அலகுகள் வெவ்வேறு எழுத்து முறைகளுக்கு ஏற்ப மாற்றியமைக்கும் லேஅவுட்களை உருவாக்குவதை பெரிதும் எளிதாக்குகின்றன, இது சர்வதேசமயமாக்கப்பட்ட பயன்பாடுகளுக்கு ஏற்றதாக அமைகிறது.

CQLUs-களைப் பயன்படுத்தும்போது கருத்தில் கொள்ள வேண்டியவை

CQLUs ரெஸ்பான்சிவ் டிசைனுக்கு ஒரு சக்திவாய்ந்த கருவியை வழங்கினாலும், சில கருத்தில் கொள்ள வேண்டிய விஷயங்களைப் பற்றி அறிந்திருப்பது முக்கியம்:

• உலாவி ஆதரவு: எந்தவொரு புதிய CSS அம்சத்தைப் போலவே, உங்கள் இலக்கு உலாவிகள் கன்டெய்னர் குவரிகள் மற்றும் CQLUs-களை ஆதரிக்கின்றனவா என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். பழைய உலாவிகளுக்கு ஃபால்பேக் ஸ்டைல்களை வழங்க முற்போக்கான மேம்பாட்டு நுட்பங்களைப் பயன்படுத்தவும். புதுப்பித்த ஆதரவு தகவலுக்கு சமீபத்திய caniuse.com தரவைச் சரிபார்க்கவும்.
• செயல்திறன்: கன்டெய்னர் குவரிகள் பொதுவாக செயல்திறன் மிக்கவை என்றாலும், CQLUs-களை உள்ளடக்கிய சிக்கலான கணக்கீடுகளின் அதிகப்படியான பயன்பாடு ரெண்டரிங் செயல்திறனைப் பாதிக்கலாம். உங்கள் CSS-ஐ மேம்படுத்துங்கள் மற்றும் தேவையற்ற கணக்கீடுகளைத் தவிர்க்கவும்.
• சிக்கலானது: கன்டெய்னர் குவரிகள் மற்றும் CQLUs-களின் அதிகப்படியான பயன்பாடு மிகவும் சிக்கலான CSS-க்கு வழிவகுக்கும். நெகிழ்வுத்தன்மைக்கும் பராமரிப்புத்தன்மைக்கும் இடையே ஒரு சமநிலைக்கு பாடுபடுங்கள். உங்கள் CSS-ஐ கவனமாக ஒழுங்கமைத்து, உங்கள் ஸ்டைல்களின் நோக்கத்தை விளக்க கருத்துக்களைப் பயன்படுத்தவும்.
• கன்டெய்னர் சூழல்: CQLUs-களைப் பயன்படுத்தும்போது கன்டெய்னரின் சூழலைக் கவனத்தில் கொள்ளுங்கள். கன்டெய்னர் சரியாக வரையறுக்கப்பட்டுள்ளது மற்றும் அதன் பரிமாணங்கள் கணிக்கக்கூடியவை என்பதை உறுதிப்படுத்தவும். தவறாக வரையறுக்கப்பட்ட கன்டெய்னர்கள் எதிர்பாராத அளவிடுதல் நடத்தைக்கு வழிவகுக்கும்.
• அணுகல்தன்மை: CQLUs-களைப் பயன்படுத்தும்போது எப்போதும் அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள். உரை படிக்கக்கூடியதாக இருப்பதையும், பார்வைக் குறைபாடுள்ள பயனர்களுக்கு எலிமென்ட்கள் பொருத்தமாக அளவிடப்பட்டிருப்பதையும் உறுதிப்படுத்தவும். உங்கள் டிசைன்களை அணுகல்தன்மை கருவிகள் மற்றும் உதவித் தொழில்நுட்பங்களுடன் சோதிக்கவும்.

CQLUs-களைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

CQLUs-களின் நன்மைகளை அதிகரிக்கவும், சாத்தியமான ஆபத்துக்களைத் தவிர்க்கவும், இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

• ஒரு திடமான அடித்தளத்துடன் தொடங்குங்கள்: நன்கு கட்டமைக்கப்பட்ட HTML ஆவணம் மற்றும் உங்கள் வடிவமைப்புத் தேவைகளைப் பற்றிய தெளிவான புரிதலுடன் தொடங்குங்கள்.
• கன்டெய்னர்களை மூலோபாய ரீதியாக வரையறுக்கவும்: கன்டெய்னர்களாக செயல்படும் எலிமென்ட்களை கவனமாகத் தேர்ந்தெடுத்து, அவற்றின் container-type-ஐப் பொருத்தமாக வரையறுக்கவும்.
• CQLUs-களை நியாயமாகப் பயன்படுத்துங்கள்: பாரம்பரிய CSS அலகுகளை விட குறிப்பிடத்தக்க நன்மையை வழங்கும் இடங்களில் மட்டுமே CQLUs-களைப் பயன்படுத்துங்கள்.
• முழுமையாக சோதிக்கவும்: உங்கள் டிசைன்கள் எதிர்பார்த்தபடி மாற்றியமைக்கின்றனவா என்பதை உறுதிப்படுத்த, பல்வேறு சாதனங்கள் மற்றும் திரை அளவுகளில் அவற்றைச் சோதிக்கவும்.
• உங்கள் குறியீட்டை ஆவணப்படுத்துங்கள்: உங்கள் CQLUs மற்றும் கன்டெய்னர் குவரிகளின் நோக்கத்தை விளக்க உங்கள் CSS-இல் கருத்துக்களைச் சேர்க்கவும்.
• ஃபால்பேக்குகளைக் கருத்தில் கொள்ளுங்கள்: கன்டெய்னர் குவரிகளை ஆதரிக்காத பழைய உலாவிகளுக்கு ஃபால்பேக் ஸ்டைல்களை வழங்கவும்.
• அணுகல்தன்மைக்கு முன்னுரிமை கொடுங்கள்: உங்கள் டிசைன்கள் அனைத்து பயனர்களுக்கும், அவர்களின் திறன்களைப் பொருட்படுத்தாமல் அணுகக்கூடியதாக இருப்பதை உறுதிப்படுத்தவும்.

ரெஸ்பான்சிவ் டிசைனின் எதிர்காலம்

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

முடிவுரை

கன்டெய்னர் குவரி நீள அலகுகள் (CQLUs) CSS கருவித்தொகுப்பிற்கு ஒரு சக்திவாய்ந்த கூடுதலாகும், இது டெவலப்பர்களுக்கு தங்கள் கன்டெய்னர்களின் பரிமாணங்களுக்கு ஏற்ப மாற்றியமைக்கும் உண்மையான ரெஸ்பான்சிவ் டிசைன்களை உருவாக்க அதிகாரம் அளிக்கிறது. cqw, cqh, cqi, cqb, cqmin, மற்றும் cqmax ஆகியவற்றின் நுணுக்கங்களைப் புரிந்துகொள்வதன் மூலம், நீங்கள் எலிமென்ட் அளவிடுதலில் ஒரு புதிய அளவிலான கட்டுப்பாட்டைத் திறந்து, டைனமிக், பராமரிக்கக்கூடிய மற்றும் பயனர் நட்பு வலை அனுபவங்களை உருவாக்க முடியும். CQLUs-களின் சக்தியைத் தழுவி, உங்கள் ரெஸ்பான்சிவ் டிசைன் திறன்களை புதிய உயரத்திற்கு உயர்த்துங்கள்.