мин-туурасы жана макс-туурасы медиа суроо үчүн синтаксис
Responsive дизайн ошол барактар динамикалуу алардын жайгашуусун жана көрүнүшүн өзгөртө аласыз баракчалар куруу үчүн ыкма бир коноктордун экран өлчөмүнө негизделген . майда түзүлүштөр, уюлдук сыяктуу эле, бул кичинекей экранда ылайыктуу түрдө калыптанган бир сайттан ала аласыз, ал эми чоң экрандар ошол ири көргөзмө туура келген долбоорду кабыл ала берет. Бул ыкма бардык колдонуучулар үчүн жакшы колдонуучу тажрыйбасын камсыз кылат, ал да жардам берет издөө рейтингдерин жакшыртуу . жооп желе үлгүсүнүн маанилүү бөлүгү CSS Медиа Queries болуп саналат.
Медиа сурамдары сайттын CSS делосуна ичиндеги кичинекей шарттуу болуп, белгилүү бир CSS эрежелерин бир гана жолу бир шарты таасир алып коюуга жол тосуп жатат - экран көлөмү жогору же белгилүү бир чектен төмөн болсо окшош.
Иш Медиа Queries
Анан кантип сен сайтында Медиа Queries колдоносуз? Бул жерде абдан жөнөкөй бир мисал болот:
- Сиз кандайдыр бир көрсөтмө стилдеги акысыз жакшы структуралаштырылган HTML документ менен башталат (бул CSS үчүн керек)
- Сиздин CSS делосуна, сиз адатта бет стайлинг менен жана сайтын карап кантип үчүн негизги белгилөө катары баштаган. Эгер 16 пиксел болууга бетине Тамганын көлөмүн келген деп, бул CSS жазууга мүмкүн: дене {арип өлчөмү: 16px; }
- Эми сен эмне үчүн жетиштүү кыймылсыз мүлк бар ири экраны үчүн Тамганын көлөмүн көбөйтүүгө болот. Бул жерде Медиа Queries тепкендиктен Сиз бул сыяктуу медиа боюнча ылгоолор жок башталат. @media экран жана (мүн-туурасы: 1000px) {}
- Бул медиа суроо синтаксиси. Бул Медиа суроого өзү түзүү @media менен башталат. Кийинки Бул учурда "экран" деген "медиа түрүн" койду. Бул Акыр-аягы, ж.б., рабочий компьютер экраны, планшеттер, уюлдук тиешелүү, Сиз "медиа өзгөчөлүгү менен" Медиа боюнча ылгоолор жок. Жогоруда биз, мисалы, ошол ": 1000px-жылдардын орто ченинде, туурасы" болот. Бул Медиа Query туурасы 1000 пиксел минималдуу туурасы көрүнүү үчүн башталат дегенди билдирет.
- Медиа Query бул элементтердин кийин, сиз кандайдыр бир кадимки CSS бийлик менен кандай иш-аракет кыларын окшош ачуу жана жабуучу кашаа менен толукталсын.
- бир Медиа Query акыркы кадам Эгер мындай шарт аткарылса, бир жолу кайрылууга келет CSS эрежелерин кошуу болуп саналат. Сиз ММК боюнча ылгоолор жок түзөт бөйрөктүү кашааларга ортосундагы бул CSS эрежелерин кошуп, ушул сыяктуу: @media экрандын жана (мүн-туурасы: 1000px) {{орган арип өлчөмү: 20px; }
- Медиа Query шарттары сакталса, кийин (серепчи терезеси кең, жок эле дегенде, 1000 пикселдик), бул CSS стили 20 пиксел биздин жаңы маанисине адепки белгиленген 16 пиксел биздин сайттын текст өлчөмүн өзгөртүп, күчүнө кирет.
Кошуу More мүнөзүнөн
Сиз сайт көрүнөө көрүнүшүн өзгөртүүгө керек бул Медиа Query ичинде көп CSS эрежелерди коюп алган. Мисалы, силер да, бирок 20 пиксел, ал арип көлөмүн жогорулатууга гана эмес, каалаган бардык пункттарды кара (# 000000) түсүн өзгөртүп болсо, бул кошууга болот:
@media экран жана (мүн-туурасы: 1000px) {{орган арип өлчөмү: 20px; } Б {түсү: # 000000; }}Кошуу More Медиа Queries
Андан тышкары, ушул сыяктуу стилдин аларга кошуп, ар бир ири өлчөмдөгү үчүн медиа Queries кошууга болот:
@media экран жана (мүн-туурасы: 1000px) {{орган арип өлчөмү: 20px; } Б {түсү: # 000000; {} @media экранга жана (мүн-туурасын: 1400px) {{орган арип өлчөмү: 24px; }}Биринчи Медиа Queries 20 пиксел Тамганын өлчөмүн өзгөртүп, туурасы 1000 пиксел боюнча илине турган. Андан кийин, серепчи 1400 пиксел жогору болуп бир жолу, тексттин өлчөмү 24 пиксел кайра өзгөртүп турган. Сиз өзгөчө сайт үчүн керек болсо, көптөгөн Медиа Queries кошууга мүмкүн.
Мин-Ширина жана Макс-Ширина
Медиа Queries жазууга, негизинен, эки жолу бар - "мин-туурасынан" колдонуу аркылуу, же болбосо "макс-туурасы" менен. Буга чейин биз иш менен "мин-туурасынан" көрдүк. Бул медиа Queries бир серепчи жок дегенде минималдуу туурасы жетти күчүнө себеп болот. Ошентип, колдонгон суроо "мүн-туурасын: 1000px" браузер, жок эле дегенде, 1000 пиксел кенен болгондо колдонулат. Медиа Query Бул стили сиз "мобилдик биринчи" жол менен сайтты куруп жатканда колдонулат.
Сиз "макс-туурасынан" колдоно турган болсо, анда карама-каршы тартипте иштейт. А Медиа-жылдын Query "макс-туурасы: 1000px" Серепчи бул өлчөмүнөн төмөн кулады жолу болмок.
Жөнүндө Улгайган браузерлери
Медиа суроо менен бир кыйынчылык Internet Explorer улгайган котормолордо колдоосу алардын жоктугу болуп саналат. Бактыга жараша, polyfills бар жерде дагы ошол сайттын дисплей улуу серепчи программалык талкаланды караган эмес экенин камсыз кылуу, ал эми бүгүн сайттарда, аларды пайдаланууга уруксат берүү, ал улуу браузерлерде Медиа Queries колдоо жыртык болот.
Jeremy Джирард тарабынан 1/24/17 күнү өзгөртүлдү