Синтаксис барои ҳар як парвандаҳои min-width ва max-width васеъ
Тарҳрезии вебсайҳона барои сохтани веб- сайтҳо, ки дар он саҳифаҳои интерактивӣ тағйирёбии тарҳ ва намуди онҳо дар асоси андозаи экрани меҳмонон метавонанд тағйир ёбанд. Экранҳои калон метавонанд ба намоишҳои калонтаре дастрас бошанд, дар ҳоле, ки дастгоҳҳои хурдтарини монанди телефони мобилӣ, метавонанд ба ҳамон веб формате, ки формати хурдтар дорад, мувофиқат кунад. Ин усул барои ҳамаи истифодабарандагон таҷрибаи беҳтартари корбарро таъмин мекунад ва ҳатто метавонад ба беҳтар кардани рейтингҳои муҳандисии ҷустуҷӯ кӯмак кунад. Қисми муҳими тарҳрезии вебсафҳаи CSS Media Queries.
Саволҳои савтӣ ба монанди вариантҳои каме дар вебсайти CSS вебсайти шумо, ба шумо имкон медиҳанд, ки қоидаҳои CSS-ро муқаррар кунанд, ки танҳо пас аз ҳолати муайяни онҳо ба вуқӯъ мепайвандад - ба монанди ҳаҷми экран ё дараҷаи муайяни онҳо.
Саволҳо дар ВАО
Пас, чӣ тавр шумо дар сомонаҳои саволномаҳои мобилӣ истифода мебаред? Ин мисоли оддӣ аст:
- Шумо бо ҳуҷҷати хуби сохторӣ HTML бе ягон намуди визуалӣ (яъне СSS)
- Дар файли CSS, шумо одатан, вақте ки шумо одатан аз рӯи саҳифаи таҳрир ва таҳияи як вебсайти барои вебсайт пайдо хоҳед кард. Бигӯед, ки андозаи ҳарф дар саҳифа 16 pixel бошад, шумо метавонед ин CSS нависед: body {font-size: 16px; }}
- Акнун, шумо мехоҳед, ки андозаи ҳарфро барои экрани калонтаре, ки моликияти амволи ғайриманқул доранд, зиёд кунад. Ин дар он ҷое, ки Саволҳои Саввум баста мешаванд. Шумо як саволномаи Media-ро оғоз карда метавонед: Мисол: @media screen ва (min-width: 1000px) {}
- Ин як калимаи мусоҳибаи Media мебошад. Он бо @media оғоз меёбад, то худи саволномаи Media-ро таъсис диҳад. Баъд шумо навъи "media type" -ро, ки дар ин ҳолат "экран" муқаррар шудааст, муайян кунед. Ин ба экранҳои компютерӣ, планшетҳо, телефонҳо ва ғайра дахл дорад. Ниҳоят, шумо ба саволномаи Media бо "хусусияти ВАО" хотима медиҳед. Дар намунаи мо, ки дар он "миёна миёна: 1000px" аст. Ин маънои онро дорад, ки Media Query барои тамошо бо паҳнтарин дараҷаи 1000 пиксел васеъ хоҳад шуд.
- Баъд аз ин унсурҳои саволномаи Медиа, шумо кушодан ва пӯшидани фишори иловагиро ба монанди он ки чӣ гуна амал мекунед, дар қоидаҳои муқаррарии CSS амал кунед.
- Қадами ниҳоии марбут ба Media Query ин илова кардани қоидаҳои CSS, ки шумо мехоҳед дархост кунед, вақте ки ин ҳолат ба вуқӯъ меоянд. Шумо ин қоидаҳои CSS-ро дар байни пружаҳои ҷинсӣ, ки чунин саволномаи Media-ро ташкил медиҳанд, инъикос карда метавонед: @media screen ва (min-width: 1000px) {body {font size-size: 20px; }}
- Вақте ки шартҳои васоити ахбори омма ба вуқӯъ мепайвандад (тирезаи браузер на камтар аз 1000 пикселро ташкил медиҳад), ин услуби CSS таъсир мекунад, тағйироти андозаи сайтро аз 16 пикселе, ки мо бар асоси арзиши нави 20 pixels муқаррар шудааст, тағйир дод.
Иловаи тарҳҳои бештар
Шумо метавонед қоидаҳои CSS-ро дар дохили ин саволнома, ки барои таъини видеоии вебсайти худ заруранд, ҷойгир кунед. Масалан, агар шумо хоҳед на танҳо андозаи ҳарфро ба 20 пиксел зиёд кунед, балки рангҳои ҳама парагҳоро ба сиёҳ (# 000000) тағйир диҳед, шумо метавонед онро илова кунед:
@media screen ва (min-width: 1000px) {body {font size-size: 20px; } p {ранги: # 000000; }}}Иловаи саволҳои иловагии ВАО
Илова бар ин, шумо метавонед саволҳои зиёди мултимедиявиро барои ҳар андозаи калонтар илова кунед ва онҳоро ба варақаи тарзи худ илова кунед:
@media screen ва (min-width: 1000px) {body {font size-size: 20px; } p {ранги: # 000000; {} @media screen ва (min-width: 1400px) {body {font size-size: 24px; }}}Якумин Саволҳои Медиа дар 1000 пиксел васеъ карда мешавад, тағир додани андозаи ҳарф ба 20 пиксел. Пас, вақте ки браузер 1400 пикселро ташкил дод, андозаи ҳарф боз ба 24 пиксел тағйир меёбад. Шумо метавонед, ки бисёр саволҳои Media-ро барои вебсайтҳои худ талаб кунед.
Min-Width ва Max-Width
Дар маҷмӯъ, ду тарзи навиштани саволномаҳои Media - бо истифода аз "min-width" ё "max-width" вуҷуд доранд. То кунун, мо дар «min-width» амал кардаем. Ин ба Саволҳо барои Media сабаб мешавад, ки вақте ки браузери ҳадди аққали ҳадди аққал ба ҳадди ақал расид. Ҳамин тавр, саволе, ки "min-width: 1000px" -ро истифода мебарад, вақте ки браузери ҳадди аққал 1000 пиксел васеъ истифода мешавад. Ин услуби саволномаро Media ҳангоми истифодабарӣ дар сайти "mobile-first" истифода мебарад.
Агар шумо "max-width" -ро истифода баред, он дар муқобил кор мекунад. Вақте ки браузери поёнтар аз ин андоза афтода мешавад, саволномаи мобайнии "max-width: 1000px" истифода мешавад.
Дар бораи браузерҳои калон
Як мушкилие, ки бо Медиа Медиа аст, набудани онҳо дар нусхаҳои қадимтарини Internet Explorer мебошад. Хушбахтона, мавҷудияти polyfills мавҷуданд , ки метавонанд барои дастгирии браузерҳои пешина, ки ба шумо имкон медиҳад, ки онҳоро дар сайтҳои имрӯз истифода баранд, дар ҳоле, ки ҳанӯз намоиши ин сайт дар нармафзори пешинаи браузер ба назар нарасидааст.
Эҷоди саҳифаҳои Эрмитаж дар 1/24/17