سی ایس ایس میڈیا استفسارات: قدم وضاحت، خصوصیات اور جائزے کی طرف قدم

ایک دفعہ کا ذکر، ویب سائٹس کا دورہ کرنے والے وہ لوگ اسمارٹ فونز اور جو دوسروں کو ہنس سبب اسی طرح موبائل آلات کے لئے. کئی صرف کیونکہ اس طرح ایک آرام دہ ڈیسک ٹاپ کمپیوٹرز ہے وہاں، کیوں یہ ضروری ہے کہ سمجھ نہیں سکا! یا، بدترین، لیپ ٹاپ. اس کے علاوہ، موبائل انٹرنیٹ، پھر مہنگا تھا.

وقت گزر چکا ہے. انٹرنیٹ سستی بن گئے. فروخت کے زیادہ سے زیادہ فونز اور گولیاں باہر آئے. کچھ دیر کے بعد سے مقبول سائٹس کے مالکان ان کے سر scratching الجھن. اعدادوشمار کے مطابق، یہ ان کے وسائل کو ایک اسٹیشنری PC کے ساتھ مقابلے میں ان کے اسمارٹ فونز کا دورہ کرنے کے امکانات زیادہ ہیں کہ شائع!

اس وقت کی سائٹس کے موبائل آلات پر دیکھنے کے لئے مرضی نہیں ہوئی ہیں. آپ کے فون پر پرانی زندگی کی طرف جانا، آپ کو چھوٹے حروف، چھوٹے مینو اشیاء اور بٹن بے چینی کے ساتھ مواد ہونا پڑے گا.

سی ایس ایس میڈیا استفسارات کی آمد

کسی بھی سکرین سے دیکھا جب وہ اچھی لگتی ہے تاکہ وسائل کو مسلط کرنے کی ضرورت تھی. سب سے پہلے ہر سائز کے لئے مختلف سائٹس قائم کرنے کی پریکٹس میں پھیل گیا. مثال کے طور پر ایک موبائل فون استعمال کرنے والے زائرین، آپ کو ایک کے وسائل، اور آپ کے کمپیوٹر کے ساتھ "بیٹھے" کیا جاتا ہے کہ ایک پر حاصل - دوسرے پر. لیکن یہ ایک طویل مہنگی اور تکلیف تھی.

پھر CSS3 میڈیا سوالات آئے. ان کے ساتھ متحرک ڈیزائن کے نفاذ کے محض امکان آیا.

متحرک ڈیزائن کیا ہے؟

وسائل کے ظہور جو براؤزنگ جس پر سکرین کے سائز کے مطابق تبدیل کرتا ہے تو یہ اصطلاح استعمال کی جاتی ہے. اس طریقے کو سمجھنے کیلئے؟ یہ آسان ہے.

آپ ایک ویب سائٹ ہے کہ ذرا تصور کریں. اس کے اوپری حصے میں ایک نیوی گیشن مینو ہے. افقی. اس صفحے کی پوری چوڑائی سے زیادہ توسیع. کہ ذیل رابطے کی معلومات کے ساتھ ایک بلاک ہے. ٹیلی فون اور پتہ بھی دو بلاکس کی طرف سے spaced اور افقی طور پر ایک دوسرے سے ملحق اہتمام کر رہے ہیں. اس بلاک کے تحت - مرکزی مواد، اور بائیں یا دائیں سائڈبار ہے. ذیل میں، ہمیشہ کی طرح، فوٹر کے طور پر.

یہ "کلاسیکی" ترتیب آریھ. یہ موبائل فونز کے لئے بہت آسان نہیں ہے، ایک ذاتی کمپیوٹر کے لئے کامل ہے لیکن. افقی مینو بہت وسیع ہے. رابطے ایک دوسرے سے بہت دور واقع ہیں. سائڈبار سے معلومات استعمال کرتے ہیں اور سب کو سکرین سکرال کرنے کی ضرورت ہو گی، اور یہ سب کے ذائقہ کے لئے نہیں ہے.

مسئلہ CSS3 میڈیا کے سوالات کے ساتھ ایک انکولی اور موبائل ڈیزائن کا استعمال کرتے ہوئے کی طرف سے حل کیا جا سکتا ہے. میڈیا کے سوالات کا استعمال کرتے ہوئے کی طرف سے، ہم مواد کے مقام کی تعمیر نو ... اب یہ اس طرح کام کرتا ہے:

• سب - عمودی نیوی گیشن مینو کے ساتھ یونٹ؛
• اس کے تحت - اب بھی عمودی طور پر رکھ دیا جاتا ہے جس میں روابط، کے ساتھ بلاک؛
• سائڈبار مواد <مرکزی> ٹیگ کے مواد کی طرف پر دکھایا جاتا ہے، اور اس کے اوپر.

یہ قبول ویب ڈیزائن میڈیا استفسارات کے ساتھ کیا جا سکتا ہے کی ایک سادہ مثال ہے. اصل میں ایک بہت زیادہ امکانات.

لہذا میڈیا کے سوالات کیا ہے؟

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. سی ایس ایس کے تحت میڈیا سوالات CSS3 آپ کو صفحے کے مواد کچھ شرائط کو اپنانے کے لئے بنا سکتے ہیں جس کے ساتھ اصطلاح ماڈیول، سمجھتے ہیں. مثال کے طور پر، یہ سکرین کے سائز، یا واقفیت کے آلہ (پورٹریٹ / زمین کی تزئین) کا جواب دینے کے لئے شروع ہوتا ہے.

نظام کے مواد کو تبدیل کرنے کی ضرورت ہے سمجھتی ہے کے طور پر؟ یہ میڈیا کے سوالات کا استعمال کرتا ہے. وہ مخصوص پیرامیٹرز کی وضاحت. ایک آلہ جس سے ایک وزیٹر سائٹ پر آیا پری نسخے سٹائل سمیت ان پیرامیٹرز، ملاقات تو. وہ کل CSS میز کے طور پر لکھا ہے، یا ایک علیحدہ فائل میں جا سکتا ہے.

سی ایس ایس میڈیا استفسارات براؤزر مطابقت

Safari до Chrome. تمام جدید براؤزر سفاری سے کروم میں، اس ٹیکنالوجی کی حمایت. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. بالکل، انٹرنیٹ ایکسپلورر کے پرانے ورژن کے صارفین کو ایک مسئلہ ہے ... لیکن کی ایمانداری اس کا سامنا - اب بھی قدیم IE کا استعمال کرتے ہوئے کر رہے ہیں جو، صرف کچھ کے بارے میں مسائل پیدا کر سکتا ہے جو.

نحو انکولی ترتیب میڈیا سوالات

html. HTML سے فائل منسلک ہونے پر شاید آپ میڈیا کے سوالات کو اجاگر کیا گیا ہے. اس لائن کو یاد رکھیں؟ Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. <لنک ریل = 'stylesheet میں' قسم = 'متن / CSS' href کی = HTTP: // سائٹ /article/320575/٪E2٪80٪99style.css٪E2٪80٪99٪3E کبھی کبھی اختتام پر ایک پیرامیٹر اضافہ کر دیتی ہے، کے طور پر دیکھا ہے جو: میڈیا = 'سکرین'.

یہ ایک میڈیا کے استفسار ہے! انہوں نے کہا کہ مخصوص سٹائل کی فائل ٹی وی سے لیس آلات پر کام کریں گے کی طرف اشارہ کرتا. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. اس کے بجائے، آپ کو سکرین پرنٹ وضاحت کر سکتے ہیں - اس معاملے میں، فائل کا سٹائل صفحے چھپا ہوا ہے تو، لاگو ہوتے ہیں.

آپ مندرجہ ذیل اوصاف استعمال کر سکتے ہیں:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; تمام - خاموشی کی طرف سے استعمال عالمگیر ورژن،، تمام مقدمات میں لاگو کیا جاتا ہے؛
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - اسکرینوں (کمپیوٹرز، لیپ ٹاپ، گولیاں، اسمارٹ فونز، اور تمام ہے کہ ایک ڈسپلے کے ساتھ لیس ہے)؛
• принтеры; پرنٹ - پرنٹرز؛
• – проекторы; پروجیکشن - پروجیکٹر؛
• – речевые браузеры; تقریر - تقریر براؤزر؛
• – для устройств для слабовидящих; بریل - نابینا کے لئے آلات؛
• – для экранов телевизоров. ٹی وی - ٹی وی سکرین کے لئے.

یہ سب نہیں ہے. , но они используются редко. کئی اضافی سی ایس ایس میڈیا استفسارات اوصاف موجود ہیں، لیکن وہ شاذ و نادر ہی استعمال کیا جاتا ہے. all. اس کے علاوہ، آپ کو ایک پیرامیٹر کی وضاحت نہیں ہے - تمام پر ڈیفالٹ.

میڈیا کے سوالات کا ڈھانچہ

css. اس کی بجائے ایک طرز فائل بنانے کے، آپ کو سی ایس ایس کے کوڈ کو استعمال کر سکتے ہیں. یہ اس طرح لگ رہا ہے:

(тут будут стили } media سکرین اور (زیادہ سے زیادہ چوڑائی: 1024px ہے) {( سے ہیں سٹائل}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. اور اضافی پیرامیٹرز - میڈیا کے استفسار پر استعمال کیا جاتا ہے یہ واضح ہے کہ بنا دیتا ہے جسmedia ہدایت کے بعد، آلہ (سکرین سکرین) کی قسم کا ایک اشارہ ہے. Max Width. اس مثال میں، سی ایس ایس میڈیا استفسارات زیادہ سے زیادہ چوڑائی جائیداد کا استعمال. px. اس کا مطلب یہ منحنی خطوط وحدانی میں درج سٹائل شامل کیا جائے گا، اگر 1024 پکسلز زیادہ آلہ کی سکرین کے سائز کے صارف. и and не обязательны. سکرین اور اور پابند نہیں. تم یہ لکھ سکتے ہیں:

media (زیادہ سے زیادہ چوڑائی: 1024px ہے) {}

ایسی صورت میں، خصوصیات بھی ڈیوائس پر استعمال کیا جائے گا، نہ صرف ٹی وی سے لیس کر رہے ہیں کہ ان لوگوں کو.

ایک سے زیادہ پیرامیٹرز کی وضاحت

آپ کئی آلات سٹائل منتخب کرنے کے لئے استعمال کیا جائے گا کی حد کو محدود کرنا چاہتے ہیں مان لیں. px, но не больше 500 px. کی آپ کو ایک smartphone سے آپ کی ویب سائٹ کا دورہ کرنے والے صرف ان کی خصوصیات کو ظاہر کرنے کے لئے چاہتے ہیں کا کہنا ہے کہ، سکرین کا سائز 320 سے بھی کم پکسلز، لیکن کوئی 500 سے زیادہ پکسلز نہیں ہے. ایسی صورت میں، درخواست فارم لے جاتا ہے:

media (کم از کم چوڑائی: 320px پر) اور (زیادہ سے زیادہ چوڑائی: 500px کی) {}

and. آپ کو پروگرامنگ سے واقف ہیں تو، آپ کو معلوم ہے NJ آپریٹر درخواست دی اور ہے کیا. وہ لوگ جو نہیں جانتے کے طور پر: یہ چیک کرتا ہے تو دونوں کے حالات درست ہیں. استفسار سکرین میں E. چالو کرنے کی خصوصیات کو 500 سے زیادہ پکسلز 320 سے کم نہیں اور نہیں ہونا چاہئے.

and не ограничивается одним. اور آپریٹرز کی تعداد ایک تک محدود نہیں ہے. تم انہیں جتنا آپ چاہتے ہیں کے طور پر رکھ سکتے ہیں. ٹی وی کے لئے - مثال کے طور پر، اسمارٹ فونز اور بالکل مختلف کے لئے ایک خاص سائز کی سکرین کی تخلیق کرنے کی کوشش کریں.

ایک اہم نقطہ - صارف کے آلہ کی واقفیت. کسی نے پورٹریٹ واقفیت میں اپنے سمارٹ فون، کسی پر ویب سائٹس براؤزنگ - زمین کی تزئین کی کے ساتھ. orientation:portrait, для вторых, соответственно, orientation:landscape. دوسری بالترتیب واقفیت کے لئے، پورٹریٹ: سابق کے لئے، آپ کو ایک اضافی شرط واقفیت کی ضرورت ہو گی زمین کی تزئین کی. @media. ان لائنوں کو بھیmedia ٹیم مندرجہ ذیل قوسین میں دکھائے گئے ہیں. and. آپ کے ذریعے ان کا اشتراک کر سکتے ہیں.

ایک اور دلچسپ nuance کی. and вы вполне можете использовать оператор or. اس کے بجائے، اور آپ کو اچھی طرح سے یا آپریٹر استعمال کرسکتے ہیں. انہوں نے درخواست میں کم از کم ایک شرط کی ضرورت ہے سچ ہو! مثال کے طور پر:

) {} media (زیادہ سے زیادہ چوڑائی: 500px کی) یا (ورئیےنٹیشن: پورٹریٹ) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. سکرین کم سے کم 500 پکسلز یا استعمال پورٹریٹ واقفیت ہے، منحنی خطوط وحدانی اثر سٹائل لے جائے گا.

ٹھیک ٹیوننگ کے لئے نہیں کی مطلوبہ الفاظ کی

not. میڈیا کے استفسار، تم نہیں لفظ داخل کر سکتے ہیں. مندرجہ ذیل کے طور پر اس کے کیا جاتا ہے:

media (نہیں زیادہ سے زیادہ چوڑائی: 700px ) {}

زیادہ سے زیادہ چوڑائی 700 پکسلز کے برابر نہیں ہے تو پراپرٹیز چالو کر رہے ہیں.

میڈیا کی خصوصیات

سوالات کے کئی پہلے سے قائم افعال استعمال کیا جا سکتا ہے. W3C. تمام آپ آن لائن W3C سکتے کے ساتھ اپنے آپ کو واقف کریں. کافی زیادہ تر coders کے مالک کے لئے تین اہم:

• (о нем мы уже говорили); سمت بندی (ہم نے پہلے سے ہی اس کے بارے میں بات کی تھی)؛
• (ширина, ее тоже упоминали); چوڑائی (چوڑائی، یہ بھی ذکر کیا ہے)؛
• (высота). اونچائی (اونچائی).

اونچائی شاذ و نادر ہی استعمال کیا جاتا ہے، لیکن چند صورتوں اس ترتیب مفید ہو سکتا ہے جس میں موجود ہیں.

کس طرح اور کہاں درخواستوں رکھنے کے لئے؟

کئی ویب ڈیزائنرز کسی طرح فائل سٹائل کے اختتام پر ڈال. مثال کے طور پر، سب سے پہلے مرکزی فہرستوں سٹائل، اور پھر، دستاویز کے نچلے حصے میں رکھا درخواستوں.

یہ بہت اچھا نہیں ہے. بہت زیادہ آسان حق اہم سٹائل کے بعد مختلف آلات کے لیے خواص رکھنے کے لئے. مثال کے طور پر، آپ کو سرخ فونٹ کا رنگ مقرر ہے جس کے ایک div، ہے:

div کے {

رنگین: سرخ،

}

فوری طور پر درخواست کے اشارہ کرتا ہے کے بعد:

media (کم از کم چوڑائی: 320px پر) {}

خواص مشروع.

اس طرح کی ایک نقطہ نظر آپ کو خالص »CSS استعمال کر رہے ہیں" پیچیدہ ہو جائے گا. پریپروسیسر کی مدد کرنے کے لئے. وہ زیادہ درست درخواست کی درخواستوں کے لئے دلچسپ مواقع کی ایک بہت ہے.

ایک اور آپشن - مختلف سٹائل کی فائلوں میں مختلف آلات کے لیے خواص رکھ. آپ کو درآمد کرنے پر پریپروسیسر ہدایت کا استعمال کرتے ہیں تو یہ خاص طور پر مفید ہے. نتیجہ، ترمیم کرنے کے لئے ایک آسان صاف کوڈ ہے.

کون ایک کو استعمال کرنے کے لئے؟ یہ سب کی ذاتی ترجیحات اور ٹیم کی خصوصیات پر منحصر ہے. شاید، آپ کے کام کی جگہ میں قبول کیا جائے گا ذرائع ابلاغ کے سوالات رکھ کے ایک مخصوص طریقہ ہے.

یہ بھی نہیں بھولنا آپ کو تازہ ترین سافٹ ویئر کے ساتھ آپ کی زندگی کو آسان بنانے کے کر سکتے ہیں. یہ صرف پریپروسیسر بارے میں نہیں ہے. نگلنا گروپ سی ایس ایس میڈیا کے سوالات کے ساتھ عمل کو زیادہ آسان بنانے کے کر سکتے ہیں. اس آلے یا اس کے analogs کے کسی بھی مہارت حاصل کرنے کی سفارش کی.