Jassif Team Institution

CSS Variables in Media Queries

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

இப்போது 450px அகலத்திற்கு கீழே உள்ள திரைகளுக்கு ஒரு மாறி மதிப்பையும், 450px அகலத்திற்கு மேல் உள்ள திரைகளுக்கு மற்றொரு மாறி மதிப்பையும் அமைக்க விரும்புகிறோம்.

Example 1: Changing Font Size

இங்கே, நாங்கள் முதலில் .container வகுப்பிற்கு --fontsize என்ற புதிய உள்ளூர் மாறியை அறிவிக்கிறோம். அதன் மதிப்பை 20 பிக்சல்களாக அமைக்கிறோம். பின்னர், "உலாவியின் அகலம் 450px அல்லது அதிகமாக இருக்கும்போது, .container வகுப்பின் --fontsize மாறி மதிப்பை 40px ஆக மாற்றவும்" என்று சொல்லும் ஒரு @media விதியை உருவாக்குகிறோம்:

:root {
  --primary-bg-color: #1e90ff;
  --primary-color: #ffffff;
}

body {
  background-color: var(--primary-bg-color);
}

.container {
  --fontsize: 20px;
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
  font-size: var(--fontsize);
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

@media screen and (min-width: 450px) {
  .container {
    --fontsize: 40px;
  }
}

Example 2: Changing Multiple Variables

இங்கே மற்றொரு உதாரணம், அங்கு நாங்கள் @media விதியில் --primary-bg-color மாறியின் மதிப்பையும் மாற்றுகிறோம்:

:root {
  --primary-bg-color: #1e90ff;
  --primary-color: #ffffff;
}

body {
  background-color: var(--primary-bg-color);
}

.container {
  --fontsize: 20px;
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
  font-size: var(--fontsize);
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

@media screen and (min-width: 450px) {
  .container {
    --fontsize: 40px;
  }
  :root {
    --primary-bg-color: lightblue;
  }
}

Benefits of Using Variables in Media Queries

Exercise

CSS var() Function

பின்வரும் அட்டவணை CSS var() செயல்பாட்டை விவரிக்கிறது: