CSS میڈیا کوئیئسٹن - مثال
- صفحه قبل CSS میڈیا کوئیلیزیشن
- صفحه بعدی مقدمه RWD
CSS میڈیا کوئیئسٹن - مزید مثال
چل کریں اور میڈیا کوئیئسٹن کی مزید مثال دیکھیں.
میڈیا کوئیئسٹن ایک مقبول تکنیک ہے، جس کا استعمال مختلف سختوں کو مخصوص استایل سٹ لگائی جانے کیلئے کیا جاتا ہے.
ایک سادا مثال دکھائیں گا، تاکہ آپ مختلف سختوں کی پس منظر کی رنگ بدل سکیں:
مثال
/* بدن کی پس منظر کی رنگ کو کمرا سورج سے بنائیں */
body {
background-color: tan;
}
/* کم از کم از 992 پیکسل کی پرنل پر، پس منظر کی رنگ کو نیلا سے بنائیں */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* در 600 پیکسل یا کم از کم از پیکسل پر، پس منظر کی رنگ کو زیتونی سے بنائیں */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
آپ جانتے ہیں کیونکہ ہم 992 پی ایکس اور 600 پی ایکس کا استعمال صحیح طور پر کرتے ہیں؟ یہی وہ ‘تیپیکل بریک پوائنٹس’ ہیں جس کا استعمال ہوتا ہے. آپ کرسکتے ہیں کہ ہمارے آموزش طراحی وب پاسخگو مطالعہ کریں تاکہ آپ اپنے نمونوں کی معیاری نقاط کا علم حاصل کریں.
منو کی میڈیا کوئری
اس مثال میں، ہم نے میڈیا کوئری کا استعمال کرکے ریاسپانسیو منو منو بنایا ہے جو مختلف اسکرین سائز میں متفاوت نظر آئیئے گا۔
مثال
/* ناو بار کنٹینر */
.topnav {
overflow: hidden;
background-color: #333;
}
/* ناو بار لنک */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* کم از کم 600 پیکسل تک کی چوڑائی والے اسکرین پر، منو کی لنکات کو پلاسٹی کی طرح نہیں بلکہ پنچ کی طرح بنائیں */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
کلومن کی میڈیا کوئری
میڈیا کوئری کا ایک مشہور استعمال ریاسپانسیو لائائٹ بنانا ہوتا ہے۔ اس مثال میں، ہم نے ایک لائائٹ بنائی ہے جو چار کلومن، دو کلومن اور پورے چوڑائی والے کلومن کے درمیان تبدیل ہوتی ہے، جو مختلف اسکرین سائز کے مطابق ہوتا ہے:
بڑی اسکرین:
متوسط اسکرین:
چھوٹی اسکرین:
مثال
/* کسی بھی طرح کی چار مساوی کلومن بنائیں جو ایک دوسرے کے ساتھ نزدیک نزدیک کی طرح نہیں بلکہ پلاسٹی کی طرح بنائیں */
.column {
float: left;
width: 25%;
}
/* 992px یا کم سے کم کی چوڑائی والے اسکرین پر، چار کلومن سے دو کلومن میں تبدیل کریں */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* کم از کم 600 پیکسل تک کی چوڑائی والے اسکرین پر، کلومن کو پلاسٹی کی طرح نہیں بلکہ پنچ کی طرح بنائیں */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
توجه:جدیدترین بنا رہی کلومن لائائٹ میں سی ایس ایس فلیکس بک کا استعمال کریں (مزید مثال دیکھیئے)۔ لیکن، انٹرنیٹ ایکسپلورر 10 اور اس سے پچھلے ورژن اس کو نہیں مددگار سما جاتا۔ اگر آئی ای 6-10 کی مدد کی ضرورت ہوئی تو اس کا استعمال کریں (مزید مثال دیکھیئے)۔
جس کے لئے فلیکس بک لائائٹ بائیں کے بارے میں مزید معلومات حاصل کرنا چاہیئے تو Flexbox CSS اس فصلی میں تعلیم حاصل کریں۔
جس کے لئے ریاسپانسیو ویب ڈیزائن کے بارے میں مزید معلومات حاصل کرنا چاہیئے تو ہمارے آموزش طراحی وب پاسخگو.
مثال
/* فلیکس بک کا کنٹینر */
.row {
display: flex;
flex-wrap: wrap;
}
/* چار مساوی کلومن بنائیں */
.column {
flex: 25%;
padding: 20px;
}
/* 992px یا کم سے کم کی چوڑائی والے اسکرین پر، چار کلومن سے دو کلومن میں تبدیل کریں */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* کم از کم 600 پیکسل تک کی چوڑائی والے اسکرین پر، کلومن کو پلاسٹی کی طرح نہیں بلکہ پنچ کی طرح بنائیں */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
میڈیا کوئری کے ذریعے عناصر کو پنهان کرنا
میڈیا کوئری کا ایک مشہور استعمال مختلف اسکرین سائز میں عناصر کو پنهان کرنا ہوتا ہے:
کم سائز کی سکرین پر میں پنهان کردوغی
مثال
/* اگر سکرین چوڑائی 600 پیکسل یا اس سے کم ہو، اس عنصر کو پنهان کریجی */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
میڈیا کوئری کا استعمال کریجی تاکہ فونٹ سائز بدل دی جاسکے
میڈیا کوئری کا استعمال کریجی تاکہ مختلف سکرین چوڑائیوں پر عناصر کی فونٹ سائز بدل دی جاسکے:
مختلف سکرین چوڑائیوں پر فونٹ سائز کا پیمانہ
مثال
/* اگر سکرین چوڑائی 600 پیکسل سے زیادہ ہو، تو <div> کی فونٹ سائز کو 80 پائیکسل مقرر کریجی */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* اگر سکرین چوڑائی 600 پیکسل یا اس سے کم ہو، تو <div> کی فونٹ سائز کو 30 پائیکسل مقرر کریجی */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
مناسب فلاش لائبریری
اس مثال میں، ہم نے میڈیا کوئری اور فلیکس بکس کا استعمال کیا ہے تاکہ مناسب پاسوورس فلاش لائبریری کا قیام کرسکیں:
مثال
مناسب ووب سائٹ
اس مثال میں، ہم نے میڈیا کوئری اور فلیکس بکس کا استعمال کیا ہے تاکہ مناسب پاسوورس ووب سائٹ کا قیام کرسکیں، جس میں مناسب ناویگیشن اور مناسب محتوا شامل ہیں。
مثال
سمت: پورٹریٹ / لینڈسکپ
میڈیا کوئری کا استعمال کیا جاسکتا ہے تاکہ صفحے کی توجیہ کو براؤزر کی سمت کے مطابق بدل دیا جاسکے。
آپ کئی سی ایس ایس پرزنٹیشن کا استعمال کرسکتے ہیں جو صرف براؤزر ونڈو کی چوڑائی کے ساتھ ساتھ اونچائی کا استعمال کرسکتا ہے، جو افقی اسکرین کہلاتا ہے:
مثال
اگر سمت کا آئیٹم کی سمت افقی ماڈ کا ہو، تو سائیڈ بگ میں روشن نیل کا استعمال کریں:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
کم سے کم چوڑائی سے زیادہ سے زیادہ چوڑائی تک
آپ میکس وکست اور مین وکست پرزنٹیشن کا استعمال کرسکتے ہیں تاکہ کم سے کم اور زیادہ سے زیادہ چوڑائی کو مقرر کرسکیں。
مثلاً اگر براؤزر کی چوڑائی 600 سے 900 پیکسل تک ہو، تو <div> عناصر کی شکل بدل دیجی:
مثال
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
اضافی مقدار استعمال: نیچے کے مثال میں، ہم نے نکالنے کے بعد کی میڈیا کوئری کا استعمال کیا ہے (مثل کارپرس عملگر):
مثال
/* جبجیتی کی چوڑائی 600 پیکسل سے 900 پیکسل تک ہو یا 1100 پیکسل سے زیادہ ہو، تو <div> کی شکل بدل دیجی */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
مرجع دستور @media CSS
برای بررسی کامل تمام نوعهای رسانه و ویژگیها/عبارات، لطفاً ببینید: قانون @media در مرجع CSS.
توجه:برای یادگیری بیشتر در مورد طراحی وب پاسخگو (چگونه برای دستگاهها و صفحهنمایشهای مختلف هدفگذاری کنید) و استفاده از نقاط شکست جستجوی رسانه، لطفاً آموزش طراحی وب پاسخگو.
- صفحه قبل CSS میڈیا کوئیلیزیشن
- صفحه بعدی مقدمه RWD
