آرٹیکل ڈائرکٹری
موبائل ریسپانسیو CSS مختلف @media اسکرین ریسپانسیو لے آؤٹ کو مختلف ریزولوشنز کے مطابق کیسے دکھاتا ہے؟
مندرجہ ذیل مضمون میں مختلف ریزولوشنز کا تعین کرنے اور انکولی چوڑائی کو حاصل کرنے کے لیے مختلف چوڑائی لے آؤٹ ڈسپلے کرنے کے لیے CSS کا استعمال کرنے کا طریقہ متعارف کرایا جائے گا۔
ضرورت مند احباب اس سے رجوع کر سکتے ہیں، امید کرتا ہوں کہ یہ سب کے لیے مفید ہو گا۔
@media اور @media اسکرین پرنٹنگ ویب صفحات کے درمیان فرق
- اگر سی ایس ایس کو پرنٹنگ ڈیوائس میں استعمال کرنے کی ضرورت ہے، تو @media استعمال کریں، بصورت دیگر، @media اسکرین استعمال کریں۔
- تاہم، یہ ضروری نہیں ہے کہ یہ سچ ہو۔ درحقیقت، اگر آپ "اسکرین" کو "پرنٹ" سے تبدیل کرتے ہیں اور اسے @media پرنٹ لکھتے ہیں، تو CSS پرنٹنگ ڈیوائس پر استعمال کیا جا سکتا ہے۔
- لیکن نوٹ کریں کہ @media پرنٹ کے ذریعہ اعلان کردہ سی ایس ایس صرف پرنٹنگ ڈیوائسز پر درست ہے۔
1. DIVCSS چھوٹے کیس کی تفصیل
ہم نے پہلے ".abc" کے نام سے ایک DIV باکس CSS سیٹ کیا، اس کی اونچائی 300px پر سیٹ کی، اور CSS بارڈر کو سیاہ پر سیٹ کیا۔
- اور ترتیبات
margin:0 autoلے آؤٹ مرکز میں ہے، اور یہ دونوں طرزیں آسان دیکھنے کے لیے پہلے سے ترتیب دی گئی ہیں۔
ہم چوڑائی کو ظاہر کرنے کے لیے براؤزر کو دستی طور پر گھسیٹتے ہیں، اور پھر دیکھتے ہیں کہ باکس کی چوڑائی کیسے بدلتی ہے:
- جب براؤزر کی چوڑائی کو 500px سے زیادہ کی چوڑائی میں ایڈجسٹ کیا جاتا ہے، تو باکس کی چوڑائی کے مطابق 100px ظاہر ہوتا ہے۔
- جب براؤزر کی چوڑائی کو 901px سے کم کرنے کے لیے ایڈجسٹ کیا جاتا ہے، تو ".abc" باکس کی چوڑائی کے مطابق ظاہر ہوتا ہے، جو 200px دکھاتا ہے۔
- جب براؤزر کی چوڑائی کو 1201px سے زیادہ کے لیے ایڈجسٹ کیا جاتا ہے، تو باکس آبجیکٹ کی چوڑائی 1200px دکھاتی ہے۔
- جب یہ 1200px سے کم ہو تو ڈسپلے کی چوڑائی 900px ہوتی ہے۔
2، CSS موبائل فون موبائل ٹرمینل انکولی کوڈ
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- واضح رہے کہ سی ایس ایس کوڈ آرڈر بڑے سے چھوٹے تک سی ایس ایس کو ٹائپ کرنا ہے (اس بات کا اندازہ لگانا کہ براؤزر کی چوڑائی جتنی زیادہ ہوگی، سامنے کا حصہ اتنا ہی زیادہ ہوگا)۔
- یہ منطقی تعلق کی وجہ سے ہے، @media کا CSS ڈیبگنگ کا فیصلہ فیصلہ کے ناکام ہونے کا سبب بنے گا۔
3. HTML کوڈ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>نوٹ: ڈیوائس کا پہلو تناسب
- ڈیوائس کے پہلو کے تناسب کو مخصوص اسکرین کے پہلو کے تناسب والے آلات کو فٹ کرنے کے لیے استعمال کیا جا سکتا ہے، جو کہ ایک مفید خاصیت بھی ہے۔
- مثال کے طور پر، ہمارا صفحہ 4:3 کے پہلو تناسب کے ساتھ عام اسکرینوں کے لیے ایک طرز کی وضاحت کرنا چاہتا ہے۔
- پھر 16:9 اور 16:10 وائڈ اسکرین کے لیے، ایک اور انداز کی وضاحت کریں، جیسے کہ انکولی چوڑائی اور مقررہ چوڑائی:
- @میڈیا صرف اسکرین اور (ڈیوائس کے پہلو کا تناسب: 4/3)
4. بڑے براؤزرز HTML+CSS+JS سورس کوڈ کے ساتھ ہم آہنگ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>مندرجہ بالا موبائل ٹرمینل اڈاپٹیو CSS ہے، جو مختلف @media اسکرین کے مطابق مختلف اسکرینوں کے مطابق جوابی تفصیلی مواد دکھاتا ہے۔
ہوپ چن ویلیانگ بلاگ ( https://www.chenweiliang.com/ ) اشتراک کردہ "موبائل اڈاپٹیو CSS مختلف اسکرینیں مختلف @media اسکرین ریسپانسیوینس ڈسپلے کرتی ہیں"، جو آپ کے لیے مددگار ہے۔
اس مضمون کا لنک شیئر کرنے میں خوش آمدید:https://www.chenweiliang.com/cwl-2074.html
تازہ ترین اپ ڈیٹس حاصل کرنے کے لیے چن ویلیانگ کے بلاگ کے ٹیلیگرام چینل میں خوش آمدید!
📚 یہ گائیڈ بہت بڑی قیمت پر مشتمل ہے، 🌟یہ ایک نادر موقع ہے، اس سے محروم نہ ہوں! ⏰⌛💨
پسند آئے تو شیئر اور لائک کریں!
آپ کا اشتراک اور پسندیدگی ہماری مسلسل حوصلہ افزائی ہے!