CSS মিডিয়া কোয়াইলে ভেরিয়েবল
- পূর্ববর্তী পৃষ্ঠা CSS ভেরিয়েবল - JavaScript
- পরবর্তী পৃষ্ঠা CSS @property
মিডিয়া কোয়াইয়ারের ভিন্নতা ব্যবহার
এখন, আমরা মিডিয়া কোয়াইয়ারের ভিন্নতা মান পরিবর্তন করতে চাই
পরামর্শ:মিডিয়া কোয়াইয়ার বিষয়টি বিভিন্ন ডিভাইস (ডিসপ্লে, ট্যাবলেট, মোবাইল ইত্যাদি) জন্য ভিন্ন শৈলী রুল নির্ধারণ করতে ব্যবহৃত হয়।আপনি “মিডিয়া কোয়াইয়ার” বিষয়ের বিষয়ে আরও জানতে পড়ুন。
এখানে, আমরা সবাথেকে প্রথমে .container শ্রেণীর জন্য একটি নতুন স্থানীয় ভিন্নতা --fontsize ঘোষণা করি।আমরা তার মান ২৫ পিক্সেল হিসাবে সংজ্ঞায়িত করি।তারপর, আমরা .container শ্রেণীতে তা আরও ব্যবহার করি।তারপর, আমরা একটি @media রুল তৈরি করি যার বিষয় হল “যখন ব্রাউজারের প্রস্থবহন ৪৫০px বা তার বেশি হয়, .container শ্রেণীর --fontsize ভিন্নতা মান ৫০px হিসাবে পরিবর্তন করুন।”
এটা সম্পূর্ণ উদাহরণ:
একটি উদাহরণ
/* 变量声明 */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* 样式 */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 50px;
}
}
এটা আরেকটি উদাহরণ, যেখানে আমরা @media রুলের --blue ভিন্নতা পরিবর্তন করি:
একটি উদাহরণ
/* 变量声明 */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* 样式 */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 50px;
}
:root {
--blue: lightblue;
}
}
ব্রাউজার সমর্থন
টেবিলের সংখ্যা এই এট্রিবিউটটির পূর্ণ সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে নির্দেশ করে
| ফাংশন | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() ফাংশন
| ফাংশন | বর্ণনা |
|---|---|
| var() | CSS ভেরিয়েবলের মান প্রবর্তন করুন。 |
- পূর্ববর্তী পৃষ্ঠা CSS ভেরিয়েবল - JavaScript
- পরবর্তী পৃষ্ঠা CSS @property
