CSS د رسنیو د پوښتنو: ګام Description، فيچرونه او کتنې له خوا ګام

کله چې د يوه وخت کې، هغه کسان چې ویبپاڼو ته سفر سمارټ او ورته ګرځنده وسایل چې په سبب نور یوازې خندل. ډیر ساده نه پوهيږي چې ولې دا ضروري ده، ځکه چې هلته ده لکه د یو هوسا د سرپاڼې کمپیوټر! او یا، په ټولو ناوړه، لپ. سربیره پردې، د موبایل انټرنېټ بيا وه ګران.

د وخت وفات شو. د انټرنېټ شو ارزانه. د خرڅلاو څخه زيات تليفونونه او د ګولۍ راغله. څه موده وروسته، د نامتو ځايونو خاوندانو حيران خپل سر ګرولو. د احصائیو له مخې، داسې ښکاري چې خپلې منابع ډیر احتمال شته چې په پرتله د يو قرطاسيه ولايتي شورا خپل سمارټ سفر!

په هغه وخت کې د ځايونه نه دي د کتلو پر ګرځنده وسایل بهینه شوي دي. د زاړه ژوند ستاسو په تليفون ته د تګ، تاسو به له کوچني لیکونه، کوچني غورنۍ توکي او تڼۍ د ناراحتۍ منځپانګه وي.

د CSS د رسنیو د پوښتنو ظهور

شته چې له منابعو تحمیل چې ښه کله چې له هر ډول د پردې په سترګه ګوري ته اړتيا وه. لومړی د هر اندازه جلا ځایونو د جوړولو د عملي خپريږي. له بل - د مثال په توګه، لیدونکو چې يو ګرځنده تلیفون څخه ګټه واخلی، تاسو په يوه منابعو، او یو چې ستاسو د کمپيوټر "ناست" ترلاسه کړي. خو دا يو اوږد، ګران او ناوړه وه.

بيا راغلل CSS3 د رسنیو د پوښتنو. له هغې سره د د خوځنده طرحې د پلي کولو يوازې امکان راغلل.

خوځنده ډیزاین څه ده؟

دا اصطلاح که د سرچینو په بڼه د پردې پر کوم چې دا لټون د اندازې په مطابق بدلون کارول. څنګه دې پوه شي؟ دا ډیر ساده دی.

فرض وکړئ چې تاسې د يو ويب پاڼه لري. د مشرانو برخه کې ده د ګرځښت غورنۍ کې موقعيت لري. افقي. دا غزوي د مخ ټول سور دي. لاندې چې د اړیکو په اړه معلومات یو بلاک کې دی. د تیلیفون او پته هم فاصله له خوا د دوو بلاکونو دي او ترتیب په افقي څنګ يو بل ته. د دغه د بنديز - د اصلي محتوا، او په پاتې یا د اړخ د پټې حق دی. لاندې، د معمول په څېر، پښۍ.

دا "کلاسيکه" هډوانه دیاګرام. دا د یو شخصي کمپيوټر کامل، خو د ګرځنده تیلیفونونه هم مناسب نه دي. افقي غورنۍ ده هم پراخه. سره اړيکې نيولي دي تر اوسه له يو بل سره موقعيت لري. د پټې څخه معلومات وکاروي او ټول به پرده شئ، او دا چې د هر چا د خوند نه.

دا ستونزه له خوا د CSS3 د رسنیو د پوښتنو یوه تطابقي او ګرځنده ډیزاین په کارولو سره حل شي. د رسنیو د پوښتنو په کارولو سره، موږ د منځپانګې د ځای د بيارغونې ... اوس دا د دې په شان کار کوي:

• سر ته - واحد سره عمودي ګرځښت غورنۍ؛
• لاندې دا - سره تماسونه، چې اوس هم په عمودي ځای د بنديز؛
• د پټې منځپانګه ده د <اصلي> ترتيبول منځپانګه خواته نه ښکاریده، او پورته دا.

دا د څه شي سره ځواب ويب ډيزاين د رسنیو د پوښتنو ترسره شي د يوه ساده مثال په توګه. په حقیقت کې یو ډېر امکانات.

نو هغه څه چې ده د رسنيو پوښتنو؟

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. لاندې CSS د رسنیو د پوښتنو CSS3 اصطلاح ماډل، له کومو سره چې تاسو کولای شي د مخ د محتوا د ځانګړو شرایطو سره تطابق ته پوه شي. د مثال په توګه، دا پيل شوه تر څو د پردې اندازه، یا الرښوونې آله (عکس / منظره) ځواب.

لکه څنګه چې د نظام پوهېږي چې د اړتیا د محتوا بدلون؟ دا د رسنيو پوښتنو کاروي. دوی د ځانګړو پارامترونو دی ځانګړی کړی. که یوه آله مېلمانه څخه چې سيمې ته ورغلل دغو پارامترونو، مخکې نسخه سبک په ګډون سره وکتل. دوي کولاي شي په توګه د ټولو CSS جدول کې لیکل شي، او یا په یوه جلا دوتنې.

CSS د رسنیو د پوښتنو د لټووني د پخیدلوموده

Safari до Chrome. ټول عصري لټوونی دغه ټکنالوجي په ملاتړ، له صفري ته کروم. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. البته، د Internet Explorer د زړو نسخو کاروونکي لري یوه ستونزه ده ... خو راځئ چې دا په صداقت سره مخ دي - هغه کسان چې اوس هم د زړو د IE په کارولو سره، يوازې د څه په اړه کولای شي د ستونزو لامل کيږي.

العروض تطابقي هډوانه د رسنیو د پوښتنو

html. ښايي تاسو د رسنيو پوښتنو کله چې د HTML د ډول دوتنې سره وصل بربنډ شوي دي. په یاد ولرئ چې د کرښې؟ Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. =' متن / CSS" href = http: // ځای /article/320575/٪E2٪80٪99style.css٪E2٪80٪99٪3E کله کله په پای کې يو بل د پاراميټر زیاتوي، د رسنیو = 'پرده: څوک په توګه کتل.

دا یوه رسنۍ د پوښتنې! هغه څرګندوي چې د مشخص ډول دوتنې به په وسایلو سمبال تلوېزيونونه کار وکړي. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. پر ځای، چې تاسو کولای شي په پرده چاپ مشخص - په دې صورت کې، د دوتنې د سبک د اجرا وړ دي، که پاڼه چاپ.

تاسو کولای شئ د لاندې صفتونو کاروي:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; د ټولو - نړیوال نسخه، له خوا چوپتیا کارول، په ټولو مواردو کې استعمال شي؛
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - پردې (کمپيوټر، لپ ټاپ، ګولۍ، سمارټ، او ټول هغه څه چې ده سره د ښوون سمبال)؛
• принтеры; چاپي - چاپ.
• – проекторы; وړاندوینې - پراجکټور؛
• – речевые браузеры; وینا - وینا د لټوونی؛
• – для устройств для слабовидящих; د بریل - د لیدلو وسایلو؛
• – для экранов телевизоров. ټلویزیون - د تلويزيون پردې.

چې نه د ټولو. , но они используются редко. شته دي څو اضافي CSS د رسنیو پوښتنو ته منسوبوي، خو هغوی په نادره توګه کارول. all. برسېره پر دې، تاسو نه د یو د پاراميټر - په ټولو افتراضي.

د رسنيو پوښتنو جوړښت

css. د سبک د دوتنې د رامنځته کولو پر ځای، چې تاسو کولای شي CSS کود وکاروي. داسې ښکاري لکه:

(тут будут стили } media پرده او (Max-سور: 1024px) {( شته سبک}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. وروستهmedia لارښود، چې دا جوته کوي چې د رسنۍ د پوښتنې د دې لپاره کارول کيږي، شته یوه نښه د هغه ډول د آله (پرده - پرده) او اضافي پارامترونو. Max Width. په دې مثال په توګه، ګټه CSS د رسنیو د پوښتنو Max د سور د ملکیت دی. px. دا په دې مانا چې د سبک په قوسونو کې لست به پکې ښکېل وي، که د آلې په پرده د اندازې په پرتله 1024 px زیات د کارونکي. и and не обязательны. پرده او او الزامي نه. تاسو کولای ولیکئ د دې:

media (Max-سور: 1024px) {}

په داسې صورت کې، د شتمنيو پر هر آله وکارول شي، نه يوازې د هغو کسانو چې سره تلوېزيونونه سمبال دي.

مشخص څو پارامترونه

راځئ چې تاسو غواړئ چي د يو څو توکي چې د ټاکل سبک به وکارول شي د یو لړ محدود کړي. px, но не больше 500 px. راځئ چې تاسو غواړئ چې د يوازې په هغو چې د سمارټ فون له خپل ځای څخه لیدنه د مال ښيي، پرده اندازه 320 څخه لږ px، خو د 500 څخه زيات px نه نه ده. په داسې صورت کې، د غوښتنې په بڼه اخلي:

media (دقیقې-سور: 320px) او (Max-سور: 500px) {}

and. که تاسو سره د پروګرامونو بلد دي، تاسو NJ پوهيږم څه Operator د تطبیقیږي او. د هغه چا لپاره نه پوهيږم: دا ګوري که دواړه شرايطو ریښتیني دي. E. د فعالولو مال په دپوښتنی سره د پردې بايد نه لږ په پرتله 320 نه زیات 500 پېکسل.

and не ограничивается одним. او د متصدیانو شمېر دی چې یو محدود نه دي. تاسو کولای شی د هغوی څومره چې تاسو غواړئ کړي. د مثال په توګه، هڅه کوي چې د سمارټ او بيخي بل راز ځینو اندازه پردې يوه رامنځته - د تلوېزيونونه.

يو مهم ټکی - د کارونکي آله د الرښوونې. چا په عکس الرښوونې خپل سمارټ، چا لټون ویب - سره د منظره. orientation:portrait, для вторых, соответственно, orientation:landscape. عکس، دوهم، په ترتیب سره، الرښوونې: منظره د پخواني، نو تاسو به د اضافي حالت د پوهاوي ته اړتيا لري. @media. دغه کرښو کې د لېنديوmedia لوبډلې په لاندې ډول دي هم ښودل شوي دي. and. تاسو کولای شی د هغوی له لارې شریک او.

يو بل په زړه پورې بېلو. and вы вполне можете использовать оператор or. پر ځای، او تاسو ښه دی او ښايي يا Operator د وکاروي. هغه په غوښتنه د لږ تر لږه یوه حالت ته اړتيا لري سمه وي! د مثال په توګه:

) {} media (Max-سور: 500px) او یا (الرښوونې: طولاني) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. که پرده ده د 500 څخه کمې px یا استعمال عکس الرښوونې، د قوسونو کې به اغېز سبک واخلي.

د پرو-رام نه د عمده

not. د رسنۍ د پوښتنې، تاسو کولای کلمه نه وليکی. دا په لاندې توګه څرګندوي:

media (Max-سور نه: 700px ) {}

د Properties هم فعاليت کوي که د اعظمي سور مساوي 700 پېکسل نه ده.

د رسنیو ځانګړنې

د پوښتنو شي څو د مخه جوړ دندو کارول. W3C. تاسو ټولو آنلاین W3C کولای ځان آشنا. زياتره coders په کافي اندازه په خپله د درې اصلي:

• (о нем мы уже говорили); الرښوونې (موږ لا خبرې په اړه دا)؛
• (ширина, ее тоже упоминали); پلنوالی (عرض، دا هم)؛
• (высота). د قد (قد).

لوړوالی دی په ندرت سره کارول، خو یو څو مواردو کې چې دا امستنې به ګټور وي.

څنګه او چېرته غوښتنو ته ځای؟

ګڼ شمیر ویب طرح حده د هغوی د دوتنې د سالمو پای ته ورسوي. د مثال په توګه، د لومړي ځل لپاره د اصلي سبک لست، او وروسته، د سند د ښکته، غوښتنې ځای.

دا ډېره ښه نه ده. ډیر مناسب اصلي سبک حق وروسته تر څو د بیلابیلو وسیلو مال ځای. د مثال په توګه، تاسو باید د یو div، چې د سره font رنګ وټاکئ:

div {

رنګ: سور؛

}

سمدلاسه وروسته په غوښتنه څرګندوي:

media (دقیقې-سور: 320px) {}

مال سپارښتنه کوي.

دا ډول روش به ستونزمن کاردی وي که تاسو سوچه »CSS کارولو". د preprocessor د مرستو د. دوی لپاره یو ډیر دقیق غوښتنلیک غوښتنو په زړه پورې فرصتونه لري.

بله لاره - لپاره په بیلابیلو ډوله فايلونه بیلابیلو وسیلو پرځای ځانتياوې. دا په خاصه توګه ګټور که تاسو د واردولو لپاره يو preprocessor لارښود وکاروي. پایله یې دا ده يوه آسانه ته د سمولو، پاک کوډ.

چې يو يې د کارولو؟ دا ټول د شخصي خوښی او د ټیم ځانګړنو پورې اړه لري. کېدای شي، په هغه ځای د خپل کار به له مخکې د يو ټاکلي لاره د نصبول د رسنيو پوښتنو.

هم نه هېر چې تاسو سره د وروستيو سافټ خپل ژوند او ساده کوي. دا يوازې د preprocessor په اړه نه ده. سره غړپ ګروپ CSS د رسنیو د پوښتنو کولی بهير ډېر اسانه دي. سپارښتنه د دې وسیله او یا د خپل مشابه کوم تسلط.