أجهزة الكمبيوتربرمجة

كس ميديا استعلامات: خطوة بخطوة الوصف والميزات والتعليقات

في وقت واحد، أولئك الذين زاروا المواقع من الهواتف الذكية والأجهزة النقالة المماثلة تسبب فقط الضحك من الآخرين. العديد من ببساطة لا يمكن أن نفهم لماذا هذا ضروري، لأن هناك مثل هذه الحواسيب مريحة مريحة! أو، في أسوأ الأحوال، أجهزة الكمبيوتر المحمولة. وبالإضافة إلى ذلك، كان الإنترنت عبر الهاتف النقال مكلفة في ذلك الوقت.

مرور الوقت. وكان الإنترنت الحصول على أرخص. في بيع المزيد والمزيد من الهواتف والأجهزة اللوحية. بعض الوقت في وقت لاحق، وأصحاب المواقع الشعبية في حيرة الرأس المهروش. ووفقا للاحصاءات، اتضح أن مواردها في كثير من الأحيان زار من الهواتف الذكية من أجهزة الكمبيوتر الثابتة!

في تلك الأيام، لم يتم تحسين المواقع للعرض من أجهزة الجوال. الذهاب إلى المورد القديم من الهاتف، يجب أن يكون المحتوى مع الحروف الصغيرة، عناصر القائمة الصغيرة وأزرار غير مريحة.

ظهور استعلامات وسائط كس

وكانت هناك حاجة إلى توفير الموارد بحيث تبدو جيدة عندما ينظر إليها من أي شاشة. أولا، انتشرت ممارسة إنشاء مواقع منفصلة لكل حجم. على سبيل المثال، الزائر الذي يستخدم الهاتف المحمول، حصل على مورد واحد، واحد الذي "جلس" من الكمبيوتر - من ناحية أخرى. لكنه كان طويلا ومكلفا وغير مريح.

ثم كانت هناك استعلامات وسائط CSS3. مع مساعدتهم، فرصة بسيطة لتنفيذ تصميم ديناميكي.

ما هو التصميم الديناميكي؟

يتم استخدام هذا المصطلح إذا تغير مظهر المورد وفقا لحجم الشاشة التي يتم عرضها. كيف يمكن فهم ذلك؟ انها بسيطة.

تخيل أن لديك موقع على شبكة الانترنت. في الجزء العلوي منه هناك قائمة الملاحة. أفقي. وهو يمتد عرض كامل للصفحة. تحت هو كتلة مع معلومات الاتصال. يتم نشر الهاتف والعنوان أيضا على كتلتين وتقع أفقيا، بجانب بعضها البعض. تحت هذه الكتلة هو المحتوى الرئيسي، ويقع الشريط الجانبي إلى اليسار أو إلى اليمين. أدناه، كالمعتاد، تذييل.

هذا هو "الكلاسيكية" تخطيط المكونات. انه لشيء رائع لجهاز كمبيوتر شخصي، ولكن ليست مريحة جدا للهواتف النقالة. القائمة الأفقية واسعة جدا. اتصالات بعيدة كل البعد عن بعضها البعض. لاستخدام المعلومات من الشريط الجانبي ولها للتمرير الشاشة، وهذا ليس الجميع يحب.

يمكن حل المشكلة باستخدام تصميم التكيف والمتنقلة مع CSS3 وسائل الإعلام الاستعلامات. مع مساعدة من الاستفسارات وسائل الإعلام نحن إعادة ترتيب موقع المحتوى ... الآن كل شيء يعمل مثل هذا:

  • في الجزء العلوي - كتلة مع قائمة الملاحة العمودية.
  • تحت ذلك هو كتلة مع الاتصالات، والتي هي الآن وضعت أيضا عموديا.
  • يتم عرض محتوى الشريط الجانبي ليس على جانب محتويات العلامة <مين>، ولكن على ذلك.

هذا هو أبسط مثال على ما يمكن القيام به باستخدام استعلامات وسائط تصميم الويب السريع الاستجابة. في الواقع، الاحتمالات أكبر بكثير.

فما هو مدياكستيون؟

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. المصطلح كس ميديا كيريز هو وحدة CSS3 التي يمكن استخدامها لإجبار محتوى الصفحة على التكيف مع ظروف معينة. على سبيل المثال، يبدأ الرد على حجم الشاشة، أو على اتجاه الجهاز (عمودي / أفقي).

كيف يفهم النظام أنك بحاجة إلى تغيير المحتوى؟ لهذا، يتم استخدام استعلامات الوسائط. وهي تحدد معلمات معينة. إذا كان الجهاز الذي جاء الزائر إلى الموقع يتوافق مع هذه المعلمات، يتم تضمين أنماط مسجلة مسبقا. يمكن كتابتها في جدول كس العام وفي ملف منفصل.

توافق استعلامات كس ميديا مع المتصفحات

Safari до Chrome. جميع المتصفحات الحديثة تدعم هذه التقنية، من سفاري إلى كروم. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. وبطبيعة الحال، فإن مستخدمي الإصدارات القديمة من إنترنت إكسبلورر مشاكل ... ولكن دعونا نعترف بصراحة - أولئك الذين لا تزال تستخدم إي القديم ، حرفيا أي شيء يمكن أن يسبب مشاكل.

استعلامات الوسائط بناء الجملة التنسيقية

html. ربما واجهت بالفعل استفسارات وسائل الإعلام عند توصيل ورقة أنماط إلى هتمل. تذكر هذا الخط؟ Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. في بعض الأحيان تم إضافة معلمة واحدة إلى النهاية، الذي بدا مثل هذا: وسائل الإعلام = 'الشاشة'.

هذا هو الطلب وسائل الإعلام! وهذا يعني أن ملف النمط المحدد سوف تعمل على أجهزة مجهزة بشاشة. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. بدلا من الشاشة، يمكنك تحديد الطباعة - في هذه الحالة، يتم تطبيق الأنماط من الملف إذا تمت طباعة الصفحة.

يمكنك استخدام السمات التالية:

  • – универсальный вариант, используется по молчанию, применяется во всех случаях; كل شيء هو خيار عالمي، وتستخدم من قبل الصمت، ويستخدم في جميع الحالات.
  • – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); سكرتين - شاشات (أجهزة الكمبيوتر، وأجهزة الكمبيوتر المحمولة، وأقراص، والهواتف الذكية وكل ما هو مجهز مع عرض).
  • принтеры; طباعة - طابعات؛
  • – проекторы; الإسقاط - أجهزة العرض؛
  • – речевые браузеры; الكلام - متصفحات الكلام.
  • – для устройств для слабовидящих; برايل - لأجهزة معاقي البصر؛
  • – для экранов телевизоров. التلفزيون - لشاشات التلفزيون.

هذا ليس كل شيء. , но они используются редко. هناك العديد من سمات إضافية من الاستعلامات كس وسائل الإعلام ، ولكن نادرا ما تستخدم. all. بالإضافة إلى ذلك، لا يمكنك تحديد معلمة على الإطلاق - افتراضيا سيتم تشغيل جميع.

هيكل طلب وسائل الإعلام

css. بدلا من إنشاء ملف نمط، يمكنك استخدام رمز كس. يبدو هذا:

(тут будут стили } media سكرين أند (ماكس-ويدث: 1024px) { ( ثير ويل بي ستايلز }

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. بعد توجيه media ، مما يجعل من الواضح أن سيتم استخدام استعلام وسائل الإعلام، ونوع الجهاز ( الشاشة ) ومعلمات إضافية المشار إليها . Max Width. في هذا المثال، يتم استخدام الخاصية عرض الاستعلام ماكس كس الاستعلام . px. وهذا يعني أن الأنماط المحددة في الأقواس المجعدية سوف تستخدم إذا لم يتجاوز حجم شاشة المستخدم 1024 بكسل. и and не обязательны. الشاشة و اختيارية. يمكنك كتابة مثل هذا:

media (ماكس-ويدث: 1024px) {}

في هذه الحالة، سيتم استخدام الخصائص على أي أجهزة، وليس فقط تلك التي تكون مجهزة بشاشة.

تحديد معلمات متعددة

لنفرض أنك تريد تحديد نطاق الأجهزة التي سيتم تطبيق الأنماط المحددة عليها. px, но не больше 500 px. على سبيل المثال، لا تريد عرض المواقع إلا لأولئك الذين يزورون موقعك من هاتف ذكي بحجم الشاشة 320 بكسل على الأقل ، ولكن ليس أكثر من 500 بكسل. في هذه الحالة، يأخذ الطلب النموذج التالي:

media (مين-ويدث: 320px) أند (ماكس-ويدث: 500px) {}

and. إذا كنت معتادا على البرمجة، نج تعرف ما ويستخدم المشغل ل . بالنسبة لأولئك الذين لا يعرفون: انه يتحقق ما إذا كانت كل الشروط صحيحة. وهذا يعني، لتفعيل الخصائص في الاستعلام، يجب أن تكون الشاشة 320 على الأقل وليس أكثر من 500 بكسل.

and не ограничивается одним. عدد المشغلين ولا يقتصر على واحد. يمكنك وضعها بالضبط بقدر ما تريد. على سبيل المثال، حاول إنشاء أحجام معينة لشاشات الهواتف الذكية ومختلفة تماما عن أجهزة التلفاز.

نقطة مهمة هي اتجاه جهاز المستخدم. شخص يتصفح المواقع مع الهاتف الذكي مع اتجاه عمودي، شخص ما - مع المناظر الطبيعية. orientation:portrait, для вторых, соответственно, orientation:landscape. بالنسبة لأول، مطلوب شرط التوجه إضافية : صورة، للمرة الثانية، على التوالي، والتوجه: المناظر الطبيعية. @media. كما يشار إلى هذه الخطوط بين قوسين بعد الأمر media. and. يمكنك فصلها مع و.

آخر الفروق الدقيقة للاهتمام. and вы вполне можете использовать оператор or. بدلا من ذلك، يمكنك استخدام أو المشغل . يريد شرط واحد في الطلب ليكون صحيحا! على سبيل المثال:

) {} media (ماكس-ويدث: 500px) أور (أورينتاتيون: بورترايت ) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. إذا كانت الشاشة أقل من 500 بكسل أو يستخدم الاتجاه الرأسي، فستكون الأنماط في الأقواس المتعرجة فعالة.

الكلمة الرئيسية لا لمزيد من الصقل

not. يمكنك إدراج الكلمة ليس في استعلام الوسائط . ويتم ذلك على هذا النحو:

media (نوت ماكس-ويدث: 700px) {}

يتم تنشيط الخصائص إذا كان الحد الأقصى للعرض هو 700 بكسل.

وظائف الوسائط

في الاستعلامات، يمكن استخدام عدة وظائف محددة مسبقا. W3C. يمكنك التعرف على كل منهم على موقع W3C. وهو ما يكفي لمعظم تيستيترز لإتقان الثلاثة الرئيسية:

  • (о нем мы уже говорили); التوجيه (لقد تحدثنا عن ذلك).
  • (ширина, ее тоже упоминали); العرض (العرض، وذكر أيضا)؛
  • (высота). ارتفاع (الارتفاع).

نادرا ما يستخدم الارتفاع، ولكن هناك العديد من الحالات التي قد يكون هذا الإعداد في متناول اليدين.

كيف وأين مكان الطلبات؟

العديد من الفنانين تخطيط لسبب ما وضعها في نهاية ورقة الأنماط. على سبيل المثال، أولا يتم سرد الأنماط الرئيسية، ثم في أسفل المستند، هناك استعلامات.

هذا ليس جيدا جدا. فمن أكثر ملاءمة لوضع خصائص لمختلف الأجهزة مباشرة بعد الأنماط الرئيسية. على سبيل المثال، لديك ديف يحتوي على لون الخط الأحمر:

ديف {

اللون: الأحمر؛

}

مباشرة بعد تحديد الاستعلام:

media (مين-ويدث: 320px) {}

وصف الخصائص.

هذا النهج سيكون مرهقا إذا كنت تستخدم "نظيفة" كس. بريبروسيسورس تأتي لانقاذ. لديهم العديد من إمكانيات مثيرة للاهتمام لتطبيق أكثر دقة من الاستفسارات.

خيار آخر هو وضع خصائص لأجهزة مختلفة في ملفات نمط مختلف. ويكون هذا مفيدا بشكل خاص إذا كنت تستخدم توجيه استيراد المعالجات المسبقة. والنتيجة هي نظيفة، رمز نظيفة.

أي خيار لاستخدام؟ كل ذلك يعتمد على التفضيلات الشخصية وخصائص الفريق. ربما، في مكان عملك، سيتم اعتماد طريقة معينة لوضع الاستفسارات وسائل الإعلام.

أيضا لا تنسى أنه يمكنك تبسيط حياتك مع مساعدة من أحدث البرامج. انها ليست مجرد عن المعالجة المسبقة. مع مساعدة من غلب المجموعة كس استفسارات وسائل الإعلام فمن الممكن لجعل العملية أكثر ملاءمة. نوصي لإتقان هذه الأداة أو بعض نظائرها.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 ar.birmiss.com. Theme powered by WordPress.