M

MLOG

ಕನ್ನಡ

ಟೈಲ್ವಿಂಡ್ CSS ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳೊಂದಿಗೆ ಎಲಿಮೆಂಟ್-ಆಧಾರಿತ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ಅಡಾಪ್ಟಿವ್ ವೆಬ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸೆಟಪ್, ಅನುಷ್ಠಾನ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

ಟೈಲ್ವಿಂಡ್ CSS ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು: ಎಲಿಮೆಂಟ್-ಆಧಾರಿತ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸ

ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್ ವಿನ್ಯಾಸವು ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ ವೀಕ್ಷಣೆಪೋರ್ಟ್ (viewport) ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ಲೇಔಟ್‌ಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದರ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿದೆ. ಇದು ಪರಿಣಾಮಕಾರಿಯಾಗಿದ್ದರೂ, ಈ ವಿಧಾನವು ಕೆಲವೊಮ್ಮೆ ಅಸಂಗತತೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ಒಂದು ಪುಟದಲ್ಲಿ ವಿಭಿನ್ನ ಸಂದರ್ಭಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳಬೇಕಾದ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ. ಇಲ್ಲಿ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಬರುತ್ತವೆ, ಇದು ಒಂದು ಪ್ರಬಲ CSS ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ಕಾಂಪೊನೆಂಟ್‌ಗಳು ವೀಕ್ಷಣೆಪೋರ್ಟ್ ಬದಲಿಗೆ ತಮ್ಮ ಪೋಷಕ ಕಂಟೇನರ್‌ನ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ತಮ್ಮ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಈ ಲೇಖನವು ನಿಜವಾದ ಹೊಂದಾಣಿಕೆಯ ಮತ್ತು ಎಲಿಮೆಂಟ್-ಆಧಾರಿತ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳನ್ನು ನಿರ್ಮಿಸಲು ಟೈಲ್ವಿಂಡ್ CSS ಫ್ರೇಮ್‌ವರ್ಕ್‌ನಲ್ಲಿ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳುವುದು ಎಂಬುದನ್ನು ವಿವರಿಸುತ್ತದೆ.

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಒಂದು CSS ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ಅದು ಒಂದು ಎಲಿಮೆಂಟ್‌ಗೆ ಅದರ ಕಂಟೈನಿಂಗ್ ಎಲಿಮೆಂಟ್‌ನ ಆಯಾಮಗಳು ಅಥವಾ ಇತರ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಆಧರಿಸಿ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಿಂದ ಗಮನಾರ್ಹವಾಗಿ ಭಿನ್ನವಾಗಿದೆ, ಏಕೆಂದರೆ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಕೇವಲ ವೀಕ್ಷಣೆಪೋರ್ಟ್ ಗಾತ್ರವನ್ನು ಅವಲಂಬಿಸಿವೆ. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳೊಂದಿಗೆ, ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಒಟ್ಟಾರೆ ಪರದೆಯ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಿಸದೆ, ವಿಭಿನ್ನ ಸಂದರ್ಭಗಳಿಗೆ ಸರಾಗವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನೀವು ರಚಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಒಂದು ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ವಿಶಾಲವಾದ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶಕ್ಕೆ ಹೋಲಿಸಿದರೆ ಕಿರಿದಾದ ಸೈಡ್‌ಬಾರ್‌ನಲ್ಲಿ ಇರಿಸಿದಾಗ ವಿಭಿನ್ನವಾಗಿ ಪ್ರದರ್ಶಿಸುವುದನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಇದನ್ನು ಸಾಧ್ಯವಾಗಿಸುತ್ತವೆ.

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಪ್ರಯೋಜನಗಳು

ಟೈಲ್ವಿಂಡ್ CSS ನೊಂದಿಗೆ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಸೆಟಪ್ ಮಾಡುವುದು

ಟೈಲ್ವಿಂಡ್ CSS, ಸ್ಥಳೀಯವಾಗಿ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬೆಂಬಲಿಸದಿದ್ದರೂ, ಈ ಕಾರ್ಯವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಪ್ಲಗಿನ್‌ಗಳೊಂದಿಗೆ ವಿಸ್ತರಿಸಬಹುದು. ಹಲವಾರು ಅತ್ಯುತ್ತಮ ಟೈಲ್ವಿಂಡ್ CSS ಪ್ಲಗಿನ್‌ಗಳು ಕಂಟೇನರ್ ಕ್ವೆರಿ ಬೆಂಬಲವನ್ನು ಒದಗಿಸುತ್ತವೆ. ನಾವು ಒಂದು ಜನಪ್ರಿಯ ಆಯ್ಕೆಯನ್ನು ಅನ್ವೇಷಿಸುತ್ತೇವೆ ಮತ್ತು ಅದರ ಬಳಕೆಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತೇವೆ.

`tailwindcss-container-queries` ಪ್ಲಗಿನ್ ಬಳಸುವುದು

`tailwindcss-container-queries` ಪ್ಲಗಿನ್ ನಿಮ್ಮ ಟೈಲ್ವಿಂಡ್ CSS ವರ್ಕ್‌ಫ್ಲೋಗೆ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಸಂಯೋಜಿಸಲು ಅನುಕೂಲಕರ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಪ್ರಾರಂಭಿಸಲು, ನೀವು ಪ್ಲಗಿನ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ:

npm install tailwindcss-container-queries

ಮುಂದೆ, ನಿಮ್ಮ `tailwind.config.js` ಫೈಲ್‌ಗೆ ಪ್ಲಗಿನ್ ಅನ್ನು ಸೇರಿಸಿ:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('tailwindcss-container-queries'),
  ],
}

ಈ ಪ್ಲಗಿನ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿಮ್ಮ ಟೈಲ್ವಿಂಡ್ CSS ಕ್ಲಾಸ್‌ಗಳಿಗೆ ಹೊಸ ವೇರಿಯೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ, ಇದು ಕಂಟೇನರ್ ಗಾತ್ರಗಳನ್ನು ಆಧರಿಸಿ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಕಾನ್ಫಿಗರೇಶನ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಚಿಕ್ಕ ಗಾತ್ರದ ಕಂಟೇನರ್ ಕನಿಷ್ಠ ಇದ್ದಾಗ ದೊಡ್ಡ ಪಠ್ಯ ಗಾತ್ರವನ್ನು ಅನ್ವಯಿಸಲು ನೀವು `cq-sm:text-lg` ಅನ್ನು ಬಳಸಬಹುದು.

ಕಂಟೇನರ್ ಗಾತ್ರಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದು

ಈ ಪ್ಲಗಿನ್ ನಿಮ್ಮ `tailwind.config.js` ಫೈಲ್‌ನಲ್ಲಿ ಕಸ್ಟಮ್ ಕಂಟೇನರ್ ಗಾತ್ರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಇದು ಪೂರ್ವನಿರ್ಧರಿತ ಗಾತ್ರಗಳ ಗುಂಪನ್ನು ಒದಗಿಸುತ್ತದೆ. ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ವಿನ್ಯಾಸದ ಅಗತ್ಯಗಳಿಗೆ ಸರಿಹೊಂದುವಂತೆ ನೀವು ಈ ಗಾತ್ರಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು. ಇಲ್ಲಿದೆ ಒಂದು ಉದಾಹರಣೆ:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      containerQueries: {
        'xs': '200px',
        'sm': '480px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
      },
    },
  },
  plugins: [
    require('tailwindcss-container-queries'),
  ],
}

ಈ ಕಾನ್ಫಿಗರೇಶನ್‌ನಲ್ಲಿ, ನಾವು ಐದು ಕಂಟೇನರ್ ಗಾತ್ರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದ್ದೇವೆ: `xs`, `sm`, `md`, `lg`, ಮತ್ತು `xl`, ಪ್ರತಿಯೊಂದೂ ನಿರ್ದಿಷ್ಟ ಅಗಲಕ್ಕೆ ಅನುಗುಣವಾಗಿದೆ. ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನ ಅವಶ್ಯಕತೆಗಳಿಗೆ ಸರಿಹೊಂದುವಂತೆ ನೀವು ಹೆಚ್ಚಿನ ಗಾತ್ರಗಳನ್ನು ಸೇರಿಸಬಹುದು ಅಥವಾ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವವುಗಳನ್ನು ಮಾರ್ಪಡಿಸಬಹುದು.

ಟೈಲ್ವಿಂಡ್ CSS ನಲ್ಲಿ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವುದು

ಈಗ ನೀವು ಪ್ಲಗಿನ್ ಅನ್ನು ಸೆಟಪ್ ಮಾಡಿದ್ದೀರಿ, ನಿಮ್ಮ ಟೈಲ್ವಿಂಡ್ CSS ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ಅನ್ವೇಷಿಸೋಣ.

ಕಂಟೇನರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

ಮೊದಲಿಗೆ, ನಿಮ್ಮ ಕ್ವೆರಿಗಳಿಗೆ ಯಾವ ಎಲಿಮೆಂಟ್ ಕಂಟೇನರ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕು. ಇದನ್ನು ಎಲಿಮೆಂಟ್‌ಗೆ `container-query` ಕ್ಲಾಸ್ ಸೇರಿಸುವ ಮೂಲಕ ಮಾಡಲಾಗುತ್ತದೆ. ನೀವು `container-[name]` (ಉದಾಹರಣೆಗೆ, `container-card`) ಬಳಸಿ ಕಂಟೇನರ್ ಹೆಸರನ್ನು ಸಹ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ಈ ಹೆಸರು, ನೀವು ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಬಹು ಕಂಟೇನರ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದರೆ ನಿರ್ದಿಷ್ಟ ಕಂಟೇನರ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

<div class="container-query container-card">
  <!-- Content of the component -->
</div>

ಕಂಟೇನರ್ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುವುದು

ಒಮ್ಮೆ ನೀವು ಕಂಟೇನರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದ ನಂತರ, ಕಂಟೇನರ್‌ನ ಅಗಲವನ್ನು ಆಧರಿಸಿ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು `cq-[size]:` ವೇರಿಯೆಂಟ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಕಂಟೇನರ್ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ಪಠ್ಯ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸಲು, ನೀವು ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಬಳಸಬಹುದು:

<div class="container-query container-card p-4 bg-gray-100 rounded-lg shadow-md"
     >
  <h2 class="text-xl font-semibold mb-2 cq-sm:text-2xl cq-md:text-3xl"
  >ರೆಸ್ಪಾನ್ಸಿವ್ ಹೆಡಿಂಗ್</h2>
  <p class="text-gray-700 cq-sm:text-lg"
  >ಇದು ಕಂಟೇನರ್ ಗಾತ್ರಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳುವ ಪ್ಯಾರಾಗ್ರಾಫ್ ಆಗಿದೆ. ಈ ಕಾಂಪೊನೆಂಟ್ ತನ್ನ ಕಂಟೇನರ್‌ನ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ತನ್ನ ನೋಟವನ್ನು ಸರಿಹೊಂದಿಸುತ್ತದೆ.
  </p>
</div>

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಹೆಡಿಂಗ್ ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ `text-xl` ಆಗಿರುತ್ತದೆ, ಕಂಟೇನರ್ ಕನಿಷ್ಠ `sm` ಗಾತ್ರದಲ್ಲಿದ್ದಾಗ `text-2xl` ಮತ್ತು ಕಂಟೇನರ್ ಕನಿಷ್ಠ `md` ಗಾತ್ರದಲ್ಲಿದ್ದಾಗ `text-3xl` ಆಗಿರುತ್ತದೆ. ಪ್ಯಾರಾಗ್ರಾಫ್ ಪಠ್ಯದ ಗಾತ್ರವು ಕಂಟೇನರ್ ಕನಿಷ್ಠ `sm` ಗಾತ್ರದಲ್ಲಿದ್ದಾಗ `text-lg` ಗೆ ಬದಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ: ಒಂದು ರೆಸ್ಪಾನ್ಸಿವ್ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್

ಕಂಟೇನರ್ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ತನ್ನ ಲೇಔಟ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ರೆಸ್ಪಾನ್ಸಿವ್ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ನ ಹೆಚ್ಚು ಸಂಪೂರ್ಣ ಉದಾಹರಣೆಯನ್ನು ರಚಿಸೋಣ.

<div class="container-query container-card p-4 bg-white rounded-lg shadow-md flex flex-col cq-md:flex-row items-center"
     >
  <img src="https://via.placeholder.com/150" alt="Placeholder Image" class="w-24 h-24 rounded-full mb-4 cq-md:mb-0 cq-md:mr-4">
  <div class="text-center cq-md:text-left"
  >
    <h2 class="text-xl font-semibold mb-2 cq-sm:text-2xl cq-md:text-3xl"
    >ರೆಸ್ಪಾನ್ಸಿವ್ ಕಾರ್ಡ್</h2>
    <p class="text-gray-700 cq-sm:text-lg"
    >ಈ ಕಾಂಪೊನೆಂಟ್ ತನ್ನ ಕಂಟೇನರ್‌ನ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ತನ್ನ ನೋಟವನ್ನು ಸರಿಹೊಂದಿಸುತ್ತದೆ. ಲಭ್ಯವಿರುವ ಸ್ಥಳವನ್ನು ಅವಲಂಬಿಸಿ ಚಿತ್ರ ಮತ್ತು ಪಠ್ಯವು ವಿಭಿನ್ನವಾಗಿ ಜೋಡಣೆಯಾಗುತ್ತದೆ.
    </p>
    <a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700"
    >ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ</a>
  </div>
</div>

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಚಿತ್ರ ಮತ್ತು ಪಠ್ಯವನ್ನು ಕಾಲಮ್ ಲೇಔಟ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಕಂಟೇನರ್ ಕನಿಷ್ಠ `md` ಗಾತ್ರದಲ್ಲಿದ್ದಾಗ, ಲೇಔಟ್ ರೋ ಲೇಔಟ್‌ಗೆ ಬದಲಾಗುತ್ತದೆ, ಚಿತ್ರ ಮತ್ತು ಪಠ್ಯವು ಸಮತಲವಾಗಿ ಜೋಡಿಸಲ್ಪಡುತ್ತದೆ. ಇದು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.

ಮುಂದುವರಿದ ಕಂಟೇನರ್ ಕ್ವೆರಿ ತಂತ್ರಗಳು

ಮೂಲಭೂತ ಗಾತ್ರ-ಆಧಾರಿತ ಕ್ವೆರಿಗಳನ್ನು ಮೀರಿ, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಹೆಚ್ಚು ಮುಂದುವರಿದ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ನೀಡುತ್ತವೆ.

ಕಂಟೇನರ್ ಹೆಸರುಗಳನ್ನು ಬಳಸುವುದು

ನೀವು `container-[name]` ಕ್ಲಾಸ್ ಬಳಸಿ ನಿಮ್ಮ ಕಂಟೇನರ್‌ಗಳಿಗೆ ಹೆಸರುಗಳನ್ನು ನಿಯೋಜಿಸಬಹುದು. ಇದು ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಶ್ರೇಣಿಯೊಳಗೆ ನಿರ್ದಿಷ್ಟ ಕಂಟೇನರ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ:

<div class="container-query container-primary">
  <div class="container-query container-secondary">
    <p class="cq-primary-sm:text-lg cq-secondary-md:text-xl">ಈ ಪಠ್ಯವು ಎರಡೂ ಕಂಟೇನರ್‌ಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ.</p>
  </div>
</div>

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `container-primary` ಕನಿಷ್ಠ `sm` ಗಾತ್ರದಲ್ಲಿದ್ದಾಗ ಪಠ್ಯದ ಗಾತ್ರವು `text-lg` ಆಗಿರುತ್ತದೆ ಮತ್ತು `container-secondary` ಕನಿಷ್ಠ `md` ಗಾತ್ರದಲ್ಲಿದ್ದಾಗ `text-xl` ಆಗಿರುತ್ತದೆ.

ಕಂಟೇನರ್ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಕ್ವೆರಿ ಮಾಡುವುದು

ಕೆಲವು ಮುಂದುವರಿದ ಕಂಟೇನರ್ ಕ್ವೆರಿ ಅನುಷ್ಠಾನಗಳು ಕಂಟೇನರ್‌ನ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಕ್ವೆರಿ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತವೆ. ಕಂಟೇನರ್‌ನ ಹಿನ್ನೆಲೆ ಬಣ್ಣ, ಫಾಂಟ್ ಗಾತ್ರ, ಅಥವಾ ಇತರ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಆಧರಿಸಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಅಳವಡಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಬಹುದು. ಆದಾಗ್ಯೂ, ಈ ಕಾರ್ಯವನ್ನು `tailwindcss-container-queries` ಪ್ಲಗಿನ್ ಸ್ಥಳೀಯವಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ ಮತ್ತು ಕಸ್ಟಮ್ CSS ಅಥವಾ ಬೇರೆ ಪ್ಲಗಿನ್ ಅಗತ್ಯವಿರಬಹುದು.

ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು

ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಒಂದು ಪುಟದೊಳಗೆ ವಿಭಿನ್ನ ಸ್ಥಾನಗಳು ಮತ್ತು ಸಂದರ್ಭಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳಬೇಕಾದ ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳಿಗೆ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿವೆ. ಉದಾಹರಣೆಗೆ, ಲಭ್ಯವಿರುವ ಸ್ಥಳವನ್ನು ಆಧರಿಸಿ ತನ್ನ ನೋಟವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್ ಅಥವಾ ಕಂಟೇನರ್ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ತನ್ನ ಕಾಲಮ್ ಅಗಲಗಳನ್ನು ಸರಿಹೊಂದಿಸುವ ಡೇಟಾ ಟೇಬಲ್ ಅನ್ನು ರಚಿಸಲು ನೀವು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಬಹುದು.

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಪರಿಣಾಮಕಾರಿ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ ಬಳಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:

ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವಾಗ, ಕೇವಲ ಪರದೆಯ ಗಾತ್ರವನ್ನು ಮೀರಿ ವಿವಿಧ ಅಂಶಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ಬಹಳ ಮುಖ್ಯ. ಇಲ್ಲಿ ಕೆಲವು ಪ್ರಮುಖ ಪರಿಗಣನೆಗಳು ಇವೆ:

ಜಾಗತಿಕ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸದ ಉದಾಹರಣೆಗಳು

ಜಾಗತಿಕ-ಸ್ನೇಹಿ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದರ ಕೆಲವು ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ:

ತೀರ್ಮಾನ

ಟೈಲ್ವಿಂಡ್ CSS ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಎಲಿಮೆಂಟ್-ಆಧಾರಿತ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳನ್ನು ನಿರ್ಮಿಸಲು ಪ್ರಬಲ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತವೆ. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನೊಳಗೆ ವಿಭಿನ್ನ ಸಂದರ್ಭಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನೀವು ರಚಿಸಬಹುದು, ಇದು ಹೆಚ್ಚು ಸ್ಥಿರ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ. ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವಾಗ ಭಾಷೆ, ಪ್ರವೇಶಸಾಧ್ಯತೆ, ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ಸಂಪರ್ಕದಂತಹ ಜಾಗತಿಕ ಅಂಶಗಳನ್ನು ಪರಿಗಣಿಸಲು ಮರೆಯದಿರಿ. ಈ ಲೇಖನದಲ್ಲಿ ವಿವರಿಸಿದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನೀವು ನಿಜವಾಗಿಯೂ ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಜಾಗತಿಕ-ಸ್ನೇಹಿ ವೆಬ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು ಅದು ಎಲ್ಲರಿಗೂ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಉಪಕರಣಗಳಲ್ಲಿ ಕಂಟೇನರ್ ಕ್ವೆರಿ ಬೆಂಬಲವು ಸುಧಾರಿಸಿದಂತೆ, ಈ ಪ್ರಬಲ ವೈಶಿಷ್ಟ್ಯದ ಇನ್ನಷ್ಟು ನವೀನ ಉಪಯೋಗಗಳನ್ನು ನಾವು ನಿರೀಕ್ಷಿಸಬಹುದು. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ, ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ, ಮತ್ತು ಸಂದರ್ಭ-ಅರಿವಿನ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ, ಅಂತಿಮವಾಗಿ ಪ್ರಪಂಚದಾದ್ಯಂತದ ಬಳಕೆದಾರರಿಗೆ ಉತ್ತಮ ವೆಬ್ ಅನುಭವಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.