CSS მედიის შეკითხვებს: ეტაპობრივად აღწერა, თვისებები და მიმოხილვა

ერთხელ, მათ, ვინც საიტებზე სმარტფონებს და მსგავსი მობილური მოწყობილობების, რომ გამოიწვიოს სხვები მხოლოდ იცინის. ბევრი უბრალოდ ვერ გამიგია, რატომ ეს აუცილებელია, რადგან არ არსებობს ასეთი კომფორტული desktop კომპიუტერი! ან, უარეს შემთხვევაში, ლეპტოპები. გარდა ამისა, მობილური ინტერნეტის შემდეგ იყო ძვირი.

დრო გავიდა. ინტერნეტი გაიაფდა. იყიდება გამოვიდა უფრო და უფრო ტელეფონები და დაფები. გარკვეული დროის შემდეგ, მფლობელები პოპულარული საიტები გვაწუხებს scratching თავის არეში. სტატისტიკის მიხედვით, აღმოჩნდა, რომ მათი რესურსები უფრო ეწვევა მათი სმარტფონებისათვის, ვიდრე სტაციონალური PC!

იმ დროს საიტები არ ოპტიმიზირებულის მობილური მოწყობილობების. აპირებს ძველი ცხოვრება თქვენი ტელეფონი, თქვენ უნდა იყოს კმაყოფილი პატარა ასოები, პატარა მენიუს ელემენტი და ღილაკები არასასიამოვნო.

მარხვის CSS მედიის შეკითხვებს

საჭირო იყო, რომ დააწესოს რესურსები ისე, რომ ისინი კარგი, როდესაც გახსნილია ნებისმიერი ეკრანზე. პირველი გავრცელებული პრაქტიკის დამკვიდრების ცალკე საიტები თითოეული ზომა. მაგალითად, სია, რომლებიც გამოიყენოთ მობილური ტელეფონი, თქვენ კიდევ ერთი რესურსი, და ერთი, რომ "ზის" თქვენს კომპიუტერში - მეორეს. მაგრამ ეს იყო ხანგრძლივი, ძვირი და მოუხერხებელია.

მაშინ მოვიდა CSS3 მედიის შეკითხვებს. მათთან ერთად მოვიდა მხოლოდ შესაძლებლობა განხორციელების დინამიური დიზაინით.

რა არის დინამიური დიზაინი?

ეს ტერმინი გამოიყენება იმ შემთხვევაში, თუ გამოჩენა რესურსი მიხედვით იცვლება ზომის ეკრანზე, რომელიც მას ათვალიერებს. როგორ გესმით ეს? ეს ძალიან მარტივია.

წარმოიდგინეთ, რომ თქვენ გაქვთ საიტი. თავის ზედა ნაწილში არის სანავიგაციო მენიუ. Horizontal. ეს ვრცელდება მთელ სიგანე გვერდზე. ქვემოთ რომ არის ბლოკის საკონტაქტო ინფორმაცია. ტელეფონის და მისამართი, ასევე დაშორებული ორი ბლოკის და მოწყობილი ჰორიზონტალურად მიმდებარე ერთმანეთს. ამ ბლოკის - მთავარი შინაარსი, და მარცხენა და მარჯვენა არის sidebar. ქვემოთ, როგორც ყოველთვის, ძირი.

ეს "კლასიკური" განლაგება სქემა. ეს არის სრულყოფილი პერსონალური კომპიუტერი, მაგრამ არა ძალიან მოსახერხებელია მობილური ტელეფონები. ჰორიზონტალური მენიუ არის ძალიან ფართო. კონტაქტი განლაგებულია შორს ერთმანეთს. იმისათვის, რომ გამოიყენოთ ინფორმაციას sidebar და ყველა უნდა გადახვევა ეკრანზე, და ეს არ არის ყველას გემო.

პრობლემა შეიძლება გადაწყდეს გამოყენებით ადაპტური და მობილური დიზაინი CSS3 მედიის შეკითხვებს. გამოყენებით მედიის შეკითხვებს, ჩვენ აღვადგენთ მდებარეობა content ... ახლა ის მუშაობს:

• top - ერთეული ვერტიკალური სანავიგაციო მენიუ;
• ქვეშ - ბლოკი კონტაქტები, რომლებიც ახლა ასევე განთავსებული ვერტიკალურად;
• sidebar შინაარსი არ არის ნაჩვენები მხარეს <მთავარი> tag შინაარსი, და ზემოთ.

ეს არის მარტივი მაგალითია, თუ რა შეიძლება გაკეთდეს საპასუხო ვებ დიზაინი მედიის შეკითხვებს. სინამდვილეში გაცილებით მეტი შესაძლებლობები.

ასე რომ, რა არის მედიის შეკითხვებს?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Under CSS მედიის შეკითხვებს CSS3 მესმის ტერმინი მოდული, რომელიც თქვენ შეუძლია შინაარსის გვერდი მოერგოს გარკვეული პირობები. მაგალითად, ის იწყებს უპასუხოს ეკრანის ზომა, ან ორიენტაციის მოწყობილობა (პორტრეტი / ლანდშაფტის).

როგორც სისტემის ესმის, რომ საჭიროა შეიცვალოს შინაარსი? იგი იყენებს მედიის შეკითხვებს. ისინი განსაზღვროს გარკვეული პარამეტრები. თუ მოწყობილობა, რომელიც სტუმარი მოვიდა საიტი აკმაყოფილებს ამ პარამეტრების, მათ შორის წინასწარი prescription სტილის. ისინი შეიძლება ჩაიწეროს როგორც საერთო CSS მაგიდა, ან ცალკე ფაილი.

CSS მედიის შეკითხვებს ბრაუზერის თავსებადობა

Safari до Chrome. ყველა თანამედროვე ბრაუზერებში ამ ტექნოლოგიით, საწყისი Safari Chrome- ში. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. რა თქმა უნდა, მომხმარებლებს ძველი ვერსიის Internet Explorer აქვს პრობლემა ... მაგრამ მოდით წინაშე იგი პატიოსნად - ვინც ჯერ კიდევ გამოყენებით ძველი IE, მხოლოდ შესახებ არაფერი შეიძლება გამოიწვიოს პრობლემები.

სინტაქსი ადაპტური განლაგება მედიის შეკითხვებს

html. ალბათ არ ექვემდებარება მედიის შეკითხვებს როდესაც დაკავშირებული სტილის ფაილი html. გახსოვდეთ, რომ ხაზი? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. =' text / css" href = http: // საიტი /article/320575/%E2%80%99style.css%E2%80%99%3E ზოგჯერ ბოლოს დასძენს კიდევ ერთი პარამეტრი, რომელიც გამოიყურებოდა, მედია = 'ეკრანზე.

ეს არის მედია შეკითხვის! იგი მიუთითებს, რომ აღნიშნული ფაილების იმუშავებს მოწყობილობები აღჭურვილია ტელევიზორით. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. ამის ნაცვლად, თქვენ შეგიძლიათ მიუთითოთ ეკრანზე ბეჭდვითი - ამ შემთხვევაში, სტილის ფაილი გამოიყენება, თუ გვერდზე დაბეჭდილი.

თქვენ შეგიძლიათ გამოიყენოთ შემდეგ ატრიბუტებს:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; ყველა - უნივერსალური ვერსია, რომელიც გამოიყენება დუმილი, გამოიყენება ყველა შემთხვევაში;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - ეკრანები (კომპიუტერები, ნოუთბუქები, ტაბლეტები, სმარტფონებისათვის, და ყველა, რომელიც აღჭურვილია ჩვენება);
• принтеры; ბეჭდვითი - პრინტერები;
• – проекторы; პროექტირება - პროექტორი;
• – речевые браузеры; სიტყვა - სიტყვის ბრაუზერები;
• – для устройств для слабовидящих; ბრაილის - მოწყობილობა ვიზუალურად impaired;
• – для экранов телевизоров. tv - სატელევიზიო ეკრანებზე.

ეს არ არის ყველა. , но они используются редко. არსებობს რამდენიმე დამატებითი ატრიბუტები CSS მედიის შეკითხვებს, მაგრამ ისინი იშვიათად გამოიყენება. all. გარდა ამისა, თქვენ არ დააკონკრეტა პარამეტრი - ნაგულისხმევია ყველა.

სტრუქტურა მედიის შეკითხვებს

css. ნაცვლად შექმნა სტილის ფაილი, შეგიძლიათ გამოიყენოთ CSS კოდი. როგორც ჩანს, ეს:

(тут будут стили } @media ეკრანზე და (max-width: 1024px) {( არსებობს სტილის}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. მას შემდეგ, რაც @media დირექტივა, რომელიც ცხადყოფს, რომ მედია შეკითხვის გამოიყენება, არის მითითება ტიპის მოწყობილობა (screen - ეკრანზე) და დამატებითი პარამეტრები. Max Width. ამ მაგალითად, გამოიყენოთ CSS მედიის შეკითხვებს მაქსიმალური სიგანე ქონება. px. ეს ნიშნავს, რომ ამ სტილის curly ფრჩხილებში გამოყენებული იქნება, თუ ეკრანის ზომა მოწყობილობის შესახებ 1024-ზე px. и and не обязательны. Screen და არა სავალდებულო. თქვენ შეგიძლიათ დაწეროთ ეს:

@media (max-width: 1024px) {}

ასეთ შემთხვევაში, თვისებები უნდა იქნას გამოყენებული ნებისმიერი მოწყობილობა, არა მხოლოდ ის, რომ აღჭურვილია ტელევიზორით.

სასურველი მრავალი პარამეტრების

დავუშვათ, რომ გსურთ შეზღუდოს დიაპაზონი რამდენიმე მოწყობილობები, რომელიც გამოყენებული იქნება აირჩიოს სტილი. px, но не больше 500 px. ვთქვათ თქვენ გსურთ ნახოთ თვისებები მხოლოდ მათ, ვინც თქვენი საიტის სმარტფონი, ეკრანის ზომა არის არანაკლებ 320 px, მაგრამ არაუმეტეს 500 px. ასეთ შემთხვევაში, მოთხოვნის ფორმას იღებს:

@media (მინ-width: 320px) და (max-width: 500px) {}

and. თუ თქვენ იცნობს პროგრამირება, NJ ვიცი, რა ოპერატორი გამოიყენება და. მათთვის, ვინც არ იცის: ის ამოწმებს, თუ ორივე პირობები ასეა. E. გააქტიურება თვისებები შეკითხვის ეკრანზე უნდა იყოს არანაკლებ 320 და არა უმეტეს 500 პიქსელი.

and не ограничивается одним. და რიგი ოპერატორები არ შემოიფარგლება ერთი. თქვენ შეგიძლიათ განათავსოთ მათ, როგორც თქვენ გსურთ. მაგალითად, უნდა შეიქმნას გარკვეული ზომის ეკრანები სმარტფონებისათვის და საკმაოდ განსხვავებული - ტელევიზორები.

მნიშვნელოვანი საკითხია - ორიენტაციის შესახებ მოწყობილობა. ვინმე ათვალიერებს ვებ თქვენი სმარტფონის პორტრეტი ორიენტაციის, ვინმე - ლანდშაფტის. orientation:portrait, для вторых, соответственно, orientation:landscape. ყოფილი, თქვენ უნდა დამატებით პირობად ორიენტაცია: პორტრეტი, მეორე, შესაბამისად, ორიენტაცია: პეიზაჟი. @media. ეს ხაზი ასევე ნაჩვენებია ფრჩხილებში შემდეგ @media გუნდი. and. თქვენ შეგიძლიათ გაუზიაროთ გავლით და.

კიდევ ერთი საინტერესო ნიუანსი. and вы вполне можете использовать оператор or. ამის ნაცვლად, და თქვენ შეიძლება ასევე გამოიყენოს და ოპერატორს. მას სჭირდება მინიმუმ ერთი პირობით მოთხოვნით უნდა იყოს ნამდვილი! მაგალითად:

) {} @media (max-width: 500px) ან (ორიენტაცია: პორტრეტი) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. თუ ეკრანზე არის არანაკლებ 500 px ან გამოყენება პორტრეტი ორიენტაციის, აფრთხილებს ძალაში სტილის.

საკვანძო არ დახვეწა

not. მედია შეკითხვაზე, თქვენ შეგიძლიათ ჩაწეროთ სიტყვა არ არის. ეს ხდება შემდეგნაირად:

@media (არ max-width: 700px ) {}

თვისებები, რომლებიც გააქტიურებული თუ მაქსიმალური სიგანე არ არის ტოლი 700 პიქსელი.

მედია თვისებები

შეკითხვებს შეიძლება გამოყენებულ იქნას რამდენიმე წინასწარ დადგენილი ფუნქციები. W3C. გაეცანით ყველა თქვენ ამჟამად W3C. ყველაზე coders საკმარისი საკუთარი სამი ძირითადი:

• (о нем мы уже говорили); ორიენტაცია (ჩვენ უკვე ვისაუბრეთ);
• (ширина, ее тоже упоминали); სიგანე (სიგანე, ასევე აღნიშნული);
• (высота). სიმაღლის (სიმაღლე).

სიმაღლე იშვიათად გამოიყენება, მაგრამ არსებობს რამდენიმე შემთხვევა, რომელიც ამ გარემოში შეიძლება იყოს სასარგებლო.

როგორ და სად უნდა განათავსონ მოთხოვნები?

ბევრი ვებ დიზაინერებს რატომღაც, რომ მათ ბოლომდე ფაილი სტილის. მაგალითად, პირველი ჩამოთვლილია ძირითადი სტილი, და შემდეგ, ბოლოში დოკუმენტის მოთავსებული მოითხოვს.

ეს არ არის ძალიან კარგი. ბევრად უფრო მოსახერხებელია განვათავსოთ თვისებები სხვადასხვა მოწყობილობები მას შემდეგ, რაც მთავარი სტილის. მაგალითად, თქვენ გაქვთ div, რომელმაც წითელი შრიფტი ფერი:

div {

ფერი: წითელი;

}

მას შემდეგ, რაც მოთხოვნის მიუთითებს:

@media (მინ-width: 320px) {}

ითვალისწინებს თვისებები.

ასეთი მიდგომა იქნება cumbersome, თუ თქვენ იყენებთ "სუფთა» css. დან დახმარების preprocessor. მათ აქვთ ბევრი საინტერესო შესაძლებლობები უფრო ზუსტი პროგრამა მოითხოვს.

მეორე ვარიანტი - დებს თვისებები სხვადასხვა მოწყობილობები სხვადასხვა სტილის ფაილი. ეს განსაკუთრებით სასარგებლოა, თუ თქვენ იყენებთ preprocessor დირექტივა იმპორტი. შედეგი არის ადვილად შეცვალონ, სუფთა კოდი.

რომელიც ერთი გამოვიყენოთ? ეს ყველაფერი დამოკიდებულია პირადი პრეფერენციები და მახასიათებლები გუნდი. ალბათ, იმ ადგილას, თქვენი სამუშაო აქვს გარკვეული გზა განთავსება მედიის შეკითხვებს მიიღება.

ასევე არ უნდა დაგვავიწყდეს, რომ თქვენ შეგიძლიათ გაამარტივებს თქვენს ცხოვრებაში უახლესი პროგრამული უზრუნველყოფა. ეს არ არის მხოლოდ შესახებ preprocessor. With Gulp Group CSS მედიის შეკითხვებს შეუძლია პროცესი ბევრად უფრო ადვილია. გირჩევთ დაეუფლონ ამ ინსტრუმენტი ან მისი ანალოგები.