სინტაქსი როგორც მინუს სიგანე და მაქსიმალური სიგანე მედიის შეკითხვებს
საპასუხო ვებ დიზაინი არის მიდგომა მშენებლობის ვებგვერდებზე, სადაც ეს გვერდები შეიძლება დინამიურად შეცვალონ მათი განლაგება და გამოჩენა დამთვალიერებლის ეკრანის ზომაზე . დიდი ეკრანები მიიღებს იმ დიდ ეკრანებს, რომლებსაც შეეძლებათ უფრო დიდი ეკრანი, ვიდრე პატარა ტელეფონები, როგორიცაა მობილური ტელეფონები, შეუძლიათ მიიღონ იგივე ვებ-ფორმატი, რომელიც განკუთვნილია ამ პატარა ეკრანზე. ეს მიდგომა უზრუნველყოფს ყველა მომხმარებლისთვის უკეთესი მომხმარებლის გამოცდილებას და მას შეუძლია დაეხმაროს საძიებო გრადაციის გაუმჯობესებას . საპასუხო ვებ-გვერდის მნიშვნელოვანი ნაწილი არის CSS მედია შეკითხვები.
მედია შეკითხვებს ჰგავს პატარა პირობითი განცხადებები თქვენს ვებსაიტის CSS- ის შიგნით, რომელიც საშუალებას გაძლევთ განსაზღვროთ გარკვეული CSS წესები, რომლებიც მხოლოდ გარკვეულ მდგომარეობას იმოქმედებს, როდესაც ეკრანის ზომა ზემოთ ან ქვემოთ არის გარკვეული ზღურბლები.
მედია შეკითხვა მოქმედებაში
როგორ იყენებთ მედია შეკითხვებს ვებ-გვერდზე? აქ არის ძალიან მარტივი მაგალითი:
- თქვენ დაიწყება კარგად სტრუქტურირებული HTML დოკუმენტის გარეშე ნებისმიერი ვიზუალური სტილის (რაც CSS არის)
- თქვენი CSS ფაილი, თქვენ დაიწყება, როგორც თქვენ ჩვეულებრივ გავაკეთოთ მიერ სტილის გვერდზე და შექმნის საბაზისო როგორ ნახვა გამოიყურება. თქვით, რომ გვერდის შრიფტის ზომა უნდა იყოს 16 პიქსელი, შეგიძლიათ დაწეროთ ეს CSS: სხეული {font-size: 16px; }
- ახლა, თქვენ შეგიძლიათ გაზარდოთ ეს შრიფტის ზომა უფრო დიდი ეკრანებისთვის, რომლითაც შეძლებენ ამის გაკეთებას. ეს არის სადაც მედია კითხვები იწყება. თქვენ დაიწყებთ მედია შეკითხვას, როგორიცაა: @ მედიის ეკრანი და (მინი სიგანე: 1000px) {}
- ეს არის მედიის შეკითხვის სინტაქსი. მედია იწყება მედიის შეკითხვის დასამყარებლად. შემდეგი "მედია ტიპი", რომელიც ამ შემთხვევაში არის "ეკრანი". ეს ეხება კომპიუტერის ეკრანებზე, ტაბლეტებზე, ტელეფონებზე და ა.შ. ბოლოს და ბოლოს, დასრულდება მედია შეკითხვა "მედია ფუნქცია". ჩვენს მაგალითზე ზემოთ, ეს არის "შუა სიგანე: 1000px". ეს იმას ნიშნავს, რომ მედია შეკითხვა გამოიყურება ეკრანისთვის მინიმუმ 1000 პიქსელების სიგანეზე.
- მას შემდეგ, რაც ამ ელემენტების მედია შეკითხვის, თქვენ დაამატოთ გახსნის და დახურვის curly გაუწიოს მსგავსი რას აკეთებთ ნებისმიერი ნორმალური CSS წესი.
- საბოლოო ნაბიჯი მედია შეკითხვის არის დაამატოთ CSS წესები, რომ გსურთ ვრცელდება ერთხელ ეს მდგომარეობა შეხვდა. თქვენ დაამატოთ ეს CSS წესები curly braces, რომლებიც ქმნიან მედია შეკითხვას, როგორიცაა: @ media screen და (მინი სიგანე: 1000px) {body {font-size: 20px; }
- როდესაც მედია მოთხოვნების დაკმაყოფილება ხდება (ბრაუზერის ფანჯარა მინიმუმ 1000 პიქსელია), ეს CSS სტილი ძალაში შედის, შეცვალოს ჩვენი საიტის შრიფტის ზომა 16 პიქსელიდან, რომელიც ჩვენ თავდაპირველად შეიქმნა 20 პიქსელების ახალი ღირებულებით.
მეტი სტილის დამატება
თქვენ შეგიძლიათ განათავსოთ როგორც ბევრი CSS წესები ამ მედია შეკითხვის ფარგლებში საჭიროა შეცვალოს თქვენი ნახვა ვიზუალური გამოჩენა. მაგალითად, თუ უნდოდა არა მხოლოდ 20 პიქსელზე ზომის შრიფტის ზომა, არამედ ყველა პუნქტის ფერის შეცვლა შავი (# 000000), შეგიძლიათ დაამატოთ:
@ მედიის ეკრანი და (მინი სიგანე: 1000px) {body {font-size: 20px; } p {ფერი: # 000000; }}დამატება მეტი მედია შეკითხვებს
გარდა ამისა, თქვენ შეგიძლიათ დაამატოთ მეტი მედია კითხვები ყველა დიდი ზომის და დასძინა, რომ მათ თქვენი სტილის ფურცელი მოსწონს:
@ მედიის ეკრანი და (მინი სიგანე: 1000px) {body {font-size: 20px; } p {ფერი: # 000000; {} @ ეკრანის ეკრანი და (მინ-სიგანე: 1400px) {body {font-size: 24px; }}პირველი მედიის შეკითხვებს 1000 პიქსელზე დასჭირდება, შრიფტის ზომის შეცვლა 20 პიქსელამდე. შემდეგ, ბრაუზერი 1400 პიქსელზე მეტი იყო, შრიფტის ზომა კვლავ შეცვლიდა 24 პიქსელს. თქვენ შეიძლება დაამატოთ როგორც ბევრი მედია შეკითხვებს, როგორც საჭიროა თქვენი კონკრეტული ნახვა.
მინი სიგანე და მაქსიმალური სიგანე
ზოგადად არსებობს ორი გზა მედია კითხვების დასაწერად - "მინი სიგანე" ან "მაქსიმალური სიგანე". ჯერჯერობით, ჩვენ ვნახეთ "მინი სიგანე" მოქმედებაში. ეს გამოიწვევს მედიის შეკითხვებს ძალაში ერთხელ, როდესაც ბრაუზერი მიაღწევს მინიმუმ მინიმუმს. ასე რომ, კითხვა, რომელიც იყენებს "min-width: 1000px", მაშინ როდესაც ბრაუზერი მინიმუმ 1000 პიქსელია. ამ კითხვის სტილი გამოყენებულია მაშინ, როდესაც შენს ვებ-გვერდზე "მობილური" პირველი ფორმით აშენებთ.
თუ "მაქსიმალურ სიგანეზე" იყენებთ, ის საპირისპიროდ მუშაობს. "Max-width: 1000px" - ის მედია შეკითხვა გამოყენებული იქნება ბრაუზერის მიერ ამ ზომის ქვემოთ.
რაც შეეხება ძველი ბრაუზერებს
ერთი გამოწვევა მედია შეკითხვებით არის მათი ნაკლებობა მხარდაჭერილი ძველი ვერსიები Internet Explorer. საბედნიეროდ, არსებობს პოლიფელების ხელმისაწვდომი, რომელიც შეიძლება პატჩი მხარდაჭერა მედია შეკითხვებს იმ ძველი ბრაუზერები, რომელიც საშუალებას გაძლევთ გამოიყენოთ ისინი ვებ-გვერდებზე დღეს, ხოლო იმის უზრუნველსაყოფად, რომ ჩვენების ამ საიტზე არ გამოიყურება გატეხილი უფრო ძველი ბრაუზერის პროგრამული უზრუნველყოფა.
რედაქტირებულია Jeremy Girard on 1/24/17