Y cystrawen ar gyfer ymholiadau cyfryngau min-led ac uchafswm
Mae dylunio gwefannau ymatebol yn ymagwedd at greu gwefannau lle gall y tudalennau hynny newid eu cynllun a'u hagwedd yn ddeinamig yn seiliedig ar faint sgrin ymwelwyr . Gall sgriniau mawr gael cynllun sy'n addas ar gyfer yr arddangosfeydd mwyaf hynny tra bo dyfeisiau llai, fel ffonau symudol, yn gallu derbyn yr un wefan wedi'i fformatio mewn modd sy'n addas ar gyfer y sgrin lai honno. Mae'r dull hwn yn darparu gwell profiad defnyddiwr i bob defnyddiwr a gall hyd yn oed helpu i wella safleoedd peiriannau chwilio . Rhan bwysig o ddylunio gwe ymatebol yw ymholiadau cyfryngau CSS.
Mae Ymholiadau'r Cyfryngau fel datganiadau amodol bach yn y ffeil CSS eich gwefan, gan ganiatáu i chi osod rheolau penodol o CSS a fydd ond yn cymryd effaith unwaith y byddlonir cyflwr penodol - fel pan fydd maint y sgrîn yn uwch neu'n is na'r trothwyon penodol.
Ymholiadau Cyfryngau ar Waith
Felly sut ydych chi'n defnyddio Ymholiadau Cyfryngau ar wefan? Dyma enghraifft syml iawn:
- Byddech yn dechrau gyda dogfen HTML wedi'i strwythuro'n dda heb unrhyw arddulliau gweledol (dyna'r hyn y mae CSS ar ei gyfer)
- Yn eich ffeil CSS, byddech yn dechrau fel y gwnewch chi fel arfer trwy arddull y dudalen a gosod llinell sylfaen ar gyfer sut y bydd y wefan yn edrych. Dywedwch eich bod am i faint ffont y dudalen fod yn 16 picsel, gallech ysgrifennu'r CSS hwn: body {font-size: 16px; }
- Nawr, efallai y byddwch am gynyddu'r maint ffont hwnnw ar gyfer sgriniau mwy sydd â digon o eiddo tiriog i wneud hynny. Dyma lle mae Ymholiadau Cyfryngau yn cychwyn. Fe fyddech yn cychwyn Gofyniad Cyfryngau fel hyn: @media screen a (min-width: 1000px) {}
- Dyma chystrawen Gofyniad Cyfryngau. Mae'n dechrau gyda @media i sefydlu'r Gofyniad Cyfryngau ei hun. Nesaf, gosodwch y "math o gyfryngau", sydd yn yr achos hwn yn "sgrin". Mae hyn yn berthnasol i sgriniau cyfrifiaduron pen-desg, tabledi, ffonau, ac yn y blaen. Yn olaf, byddwch yn gorffen y Gofyniad Cyfryngau gyda'r "nodwedd cyfryngau". Yn ein hagwedd uchod, mae hynny'n "canol lled: 1000px". Mae hyn yn golygu y bydd y Gofyniad Cyfryngau yn cychwyn ar gyfer arddangosfeydd sydd â lled o leiaf 1000 picsel o led.
- Ar ôl yr elfennau hyn o'r Gofyniad Cyfryngau, rydych chi'n ychwanegu brace gylchol agoriadol a chadarn tebyg i'r hyn y byddech chi'n ei wneud mewn unrhyw reol CSS arferol.
- Y cam olaf i Gofyn Cyfryngau yw ychwanegu'r rheolau CSS yr hoffech eu defnyddio unwaith y byddlonir yr amod hwn. Rydych chi'n ychwanegu'r rheolau CSS hyn rhwng y braces cyrlin sy'n ffurfio Gofyniad y Cyfryngau, fel hyn: @media screen a (min-width: 1000px) {body {font-size: 20px; }
- Pan fyddlonir amodau'r Gofyniad Cyfryngau (mae ffenestr y porwr o leiaf 1000 picsel o led), bydd yr arddull CSS hon yn dod i rym, gan newid maint ffont ein safle o'r 16 picsel a sefydlwyd yn wreiddiol i'n gwerth newydd o 20 picsel.
Ychwanegu Mwy o Ddulliau
Gallech osod cymaint o reolau CSS o fewn y Gofyniad Cyfryngau hwn yn ôl yr angen i addasu ymddangosiad gweledol eich gwefan. Er enghraifft, os ydych chi am wella nid yn unig y ffont-maint i 20 picsel, ond hefyd newid lliw pob paragraff i ddu (# 000000), gallech ychwanegu hyn:
@media screen a (min-width: 1000px) {body {font-size: 20px; } p {lliw: # 000000; }}Yn ychwanegu mwy o ymholiadau cyfryngau
Yn ogystal, gallwch ychwanegu mwy o Ymholiadau Cyfryngol ar gyfer pob maint mwy, gan eu hychwanegu at eich dalen arddull fel hyn:
@media screen a (min-width: 1000px) {body {font-size: 20px; } p {lliw: # 000000; {} @media screen a (min-width: 1400px) {body {font-size: 24px; }}Byddai'r Ymholiadau Cyfryngau cyntaf yn cychwyn ar 1000 picsel o led, gan newid maint y ffont i 20 picsel. Yna, unwaith y byddai'r porwr yn uwch na 1400 picsel, byddai maint y ffont yn newid eto i 24 picsel. Gallech ychwanegu cymaint o Geisiadau Cyfryngau yn ôl yr angen ar gyfer eich gwefan benodol.
Lleiafswm ac Uchafswm
Yn gyffredinol, mae dwy ffordd i ysgrifennu Ymholiadau Cyfryngau - trwy ddefnyddio "lled-fylchau" neu "max-width". Hyd yn hyn, rydym wedi gweld "lled-lygaid" ar waith. Mae hyn yn golygu y bydd Ymholiadau'r Cyfryngau yn dod i rym unwaith y bydd porwr wedi cyrraedd o leiaf y lled lleiaf hwnnw. Felly bydd ymholiad sy'n defnyddio "min-lled: 1000px" yn berthnasol pan fo'r porwr o leiaf 1000 picsel o led. Defnyddir yr arddull hwn o Gyfryngau Cyfryngau pan fyddwch yn adeiladu safle mewn modd "symudol-gyntaf".
Os ydych chi'n defnyddio "max-width", mae'n gweithio i'r gwrthwyneb. Byddai Gofyniad Cyfryngau o "max-width: 1000px" yn berthnasol unwaith y bydd y porwr wedi gostwng o dan y maint hwn.
O ran Porwyr Hŷn
Un her gydag Ymholiadau Cyfryngau yw eu diffyg cefnogaeth mewn fersiynau hŷn ar Internet Explorer. Yn ddiolchgar, mae yna bolisïau ar gael a all gipio cefnogaeth ar gyfer Ymholiadau Cyfryngol yn y porwyr hŷn hynny, gan eich galluogi i'w defnyddio ar wefannau heddiw, gan sicrhau na fydd arddangosiad y safle hwnnw yn edrych ar feddalwedd porwr hŷn.
Golygwyd gan Jeremy Girard ar 1/24/17