Sintaksa për të dy pyetjet e mediave me gjerësi të vogël dhe maksimale
Dizajni i përgjegjshëm i uebit është një qasje për të ndërtuar faqet e internetit ku ato faqe mund të ndryshojnë dinamikisht paraqitjen dhe pamjen e tyre bazuar në madhësinë e ekranit të vizitorit . Ekranet e mëdha mund të marrin një plan urbanistik të përshtatshëm për ato shfaqje më të mëdha, ndërsa pajisjet më të vogla, si telefonat celularë, mund të marrin të njëjtin website të formatuar në një mënyrë të përshtatshme për atë ekran më të vogël. Kjo qasje ofron një përvojë më të mirë për përdoruesit për të gjithë përdoruesit dhe mund të ndihmojë edhe në përmirësimin e renditjes së motorëve të kërkimit . Një pjesë e rëndësishme e dizajnit të përgjegjshëm të uebit është CSS Media Queries.
Media Pyetjet janë si deklarata pak të kushtëzuara brenda skedarit CSS të faqes suaj, duke ju lejuar të vendosni rregulla të caktuara të CSS që do të ndikojnë vetëm njëherë kur një kusht i caktuar është përmbushur - si kur një madhësi e ekranit është mbi ose nën prag të caktuara.
Pyetjet e Mediave në Veprim
Pra, si i përdorni Media Queries në një faqe interneti? Këtu është një shembull shumë i thjeshtë:
- Ju do të filloni me një dokument HTML mirë të strukturuar pa ndonjë stil vizual (kjo është ajo për CSS)
- Në skedarin tuaj CSS, ju do të filloni siç bëni normalisht duke e dizenjuar faqen dhe duke vendosur një bazë për mënyrën se si do të duket faqja e internetit. Thuaj që dëshironi që madhësia e shkrimit të faqes të jetë 16 piksele, mund të shkruani këtë CSS: body {font-size: 16px; }
- Tani, mund të dëshironi të rritni madhësinë e shkronjave për ekranet më të mëdha që kanë pasuri të mjaftueshme për ta bërë këtë. Këtu do të filloni një Query Media si kjo: @media screen and (min-width: 1000px) {}
- Kjo është sintaksë e një kërkimi mediatik. Fillon me @media për të krijuar vetë Query Media. Pastaj vendosni "llojin e medias", e cila në këtë rast është "ekran". Kjo vlen për ekranet e kompjuterit, tabletët, telefonat etj. Përfundimisht, i jep fund "Query Media" me "funksionin e medias". Në shembullin tonë më lart, kjo është "mid-width: 1000px". Kjo do të thotë që Query Media do të fillojë për shfaqje me një gjerësi minimale prej 1000 pixels të gjerë.
- Pas këtyre elementëve të Query Media, shtoni një shtrëngim të hapjes dhe mbylljes së kaçurrelës të ngjashme me atë që do të bëni në çdo rregull normal CSS.
- Hapi përfundimtar për një kërkesë mediash është që të shtoni rregullat CSS që dëshironi të aplikoni sapo të plotësohet ky kusht. Ju shtoni këto rregulla CSS midis rripave të kaçurrelave që përbëjnë Query Media, si kjo: @media screen dhe (min-width: 1000px) {body {font-size: 20px; }
- Kur kushtet e Media Query janë përmbushur (dritarja e shfletuesit është e gjërë me të paktën 1000 pixels), kjo stilin CSS do të hyjë në fuqi, duke ndryshuar madhësinë e shkrimit të faqes sonë nga 16 pixels që kemi krijuar fillimisht me vlerën tonë të re prej 20 pixels.
Shtimi i stileve të tjera
Ju mund të vendosni sa më shumë rregulla CSS brenda këtij Query Media siç është e nevojshme për të rregulluar pamjen vizuale të faqes suaj. Për shembull, nëse dëshironi të rrisni madhësinë e shkronjave deri në 20 piksele, por gjithashtu ta ndryshoni ngjyrën e të gjitha paragrafeve në të zezë (# 000000), mund të shtoni këtë:
Ekrani @media dhe (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; }}Shtimi i më shumë pyetjeve të medias
Përveç kësaj, ju mund të shtoni më shumë Media Pyetje për çdo madhësi më të madhe, duke i shtuar ato në fletën tuaj të stilit si kjo:
Ekrani @media dhe (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @ media dhe (min-width: 1400px) {body {font-size: 24px; }}Pyetjet e para të mediave do të fillonin në 1000 pixel të gjerë, duke ndryshuar madhësinë e shkrimit deri në 20 piksele. Pastaj, sapo shfletuesi ishte mbi 1400 piksela, madhësia e shkrimit do të ndryshonte përsëri në 24 piksele. Ju mund të shtoni sa më shumë Pyetje për Media si të nevojshme për faqen tuaj të veçantë.
Min-Gjerësia dhe Maks-Gjerësia
Në përgjithësi ka dy mënyra për të shkruar Media Queries - duke përdorur "min-width" ose me "max-width". Deri më tani, ne kemi parë "min-gjerësi" në veprim. Kjo shkakton që pyetjet e medias të hyjnë në fuqi sapo një shfletues të ketë arritur të paktën atë gjerësi minimale. Pra, një pyetje që përdor "min-width: 1000px" do të aplikohet kur shfletuesi të jetë së paku 1000 pixels i gjerë. Ky stil i Media Query përdoret kur po ndërton një faqe në një mënyrë "të lëvizshme".
Nëse përdorni "max-width", funksionon në mënyrë të kundërt. Një kërkesë mediatike "max-width: 1000px" do të aplikohej sapo shfletuesi të binte nën këtë madhësi.
Lidhur me shfletuesit më të vjetër
Një sfidë me Media Queries është mungesa e mbështetjes së tyre në versionet më të vjetra në Internet Explorer. Fatmirësisht, ka poliflesse në dispozicion që mund të mbështesin përkrahjen për Media Queries në ato shfletues të vjetër, duke ju lejuar t'i përdorni ato në faqet e internetit sot, duke siguruar që shfaqja e asaj faqeje nuk duket e prishur në softuerin e vjetër të shfletuesit.
Redaktuar nga Jeremy Girard më 1/24/17