An co-chòrdadh airson ceistean meadhan-leud agus mead-leud
Is e dealbhadh lìn fhreagarrach dòigh-obrach airson duilleagan lìn togail far am faod na duilleagan sin atharrachadh a dhèanamh air an cruth agus an coltas a tha stèidhichte air meud an neach-tadhail . Faodaidh sgàilean mòra cruth a tha freagarrach dha na taisbeanaidhean nas motha sin fhad 'sa tha innealan nas lugha, mar fònaichean-làimhe, a' faighinn an aon làrach-lìn ann an cruth a tha freagarrach airson an sgrion nas lugha sin. Tha an dòigh-obrach seo a 'toirt eòlas luchd-cleachdaidh nas fheàrr do gach neach-cleachdaidh agus faodaidh e cuideachadh a' leasachadh rionnagan einnseanan luirg . Is e pàirt chudromach de dhealbhadh lìn fhreagairteach Ceistean Meadhanan CSS.
Tha ceistean meadhain coltach ri aithrisean co-cheangailte beag taobh a-staigh faidhle CSS an làrach-lìn agad, a 'toirt cothrom dhut riaghailtean CSS sònraichte a shuidheachadh a bheir buaidh ach nuair a thèid staid àraidh a choileanadh - mar a tha meud an sgrion gu h-àrd no nas ìsle.
Ceistean Meadhanan ann an Gnìomh
Mar sin, ciamar a chleachdas tu Ceistean Meadhanan air làrach-lìn? Seo eisimpleir fìor shìmplidh:
- Thòisicheadh tu le sgrìobhainn HTML le deagh structar an-asgaidh de stoidhlichean lèirsinneach lèirsinneach (is e sin dè an CSS airson)
- Anns an fhaidhle CSS agad, thòisicheadh tu mar as àbhaist a nì thu le bhith a 'dealbhadh na duilleige agus a' suidheachadh bun-loidhne airson mar a sheallas an làrach-lìn. A bheil thu ag iarraidh gum biodh meud cruth na duilleige 16 piogsail, dh 'fhaodadh tu an CSS seo a sgrìobhadh: body {font-size: 16px; }
- A-nis, is dòcha gum bi thu airson meud a 'chlò-bhualaidh sin a mheudachadh airson sgàilean nas motha aig a bheil uidheamachd mòr gu leòr gus sin a dhèanamh. Seo far a bheil Ceistean nam Meadhanan a 'tòiseachadh. Bheireadh tu Ceist nam meadhanan mar seo: @media screen agus (min-width: 1000px) {}
- Is e seo co-chòrdadh Ceist nam Meadhanan. Bidh e a 'tòiseachadh le @media gus Ceist nam Meadhanan fhèin a stèidheachadh. An ath thu stèidhich thu "seòrsa meadhanan", anns a 'chùis seo tha "sgrion". Tha seo a 'buntainn ri sgàileanan, clàran, fònaichean, msaa. Mu dheireadh, bidh thu a' crìochnachadh Ceist nam Meadhanan leis an "feart mheadhanan". Anns an eisimpleir gu h-àrd, tha sin "meadhan leud: 1000px". Tha seo a 'ciallachadh gum bi Ceist nam Meadhanan a' tòiseachadh airson taisbeanaidhean le leud as lugha de 1000 pixel air leud.
- Às deidh na h-eileamaidean seo de Cheist nam Meadhanan, cuiridh tu fosgladh agus dùnadh brat lùbach coltach ri na dhèanadh tu ann an riaghailt CSS àbhaisteach sam bith.
- Is e an ceum mu dheireadh gu Ceist nam Meadhanan na riaghailtean CSS a tha thu ag iarraidh cur a-steach nuair a thèid an t-suidheachadh seo a choileanadh. Tha thu a 'cur ris na riaghailtean CSS seo eadar na bracaichean lùbach a tha a' dèanamh suas Ceist nam Meadhanan, mar seo: @media screen agus (min-width: 1000px) {body {font-size: 20px; }
- Nuair a thèid coinneachadh ri cùmhnantan Ceist nam Meadhanan (bidh an uinneag brabhsair aig a bheil co-dhiù 1000 piogsail de leud), bheir an stoidhle CSS seo buaidh, ag atharrachadh meud cruth ar làrach bhon 16 piogsail a stèidhich sinn bho thùs gu ar luach ùr de 20 piogsail.
A 'cur barrachd stoidhlean ri chèile
Dh'fhaodadh tu a leithid de riaghailtean CSS a chur taobh a-staigh Ceist nam Meadhanan mar a dh'fheumadh tu coltas lèirsinneach na làraich-lìn agad atharrachadh. Mar eisimpleir, ma bha thu airson a bhith a 'meudachadh an clò-mheud gu 20 piogsail, ach cuideachd atharraich e dath gach paragraf gu dubh (# 000000), dh'fhaodadh tu seo a chur ris:
@media screen agus (min-width: 1000px) {body {font-size: 20px; } p {dath: # 000000; }}A 'cur a-steach ceistean mu mheadhanan
A bharrachd air an sin, faodaidh tu barrachd Ceistean Meadhanan a chur ris a h-uile meud nas motha, gan cur ris an duilleag stoidhle agad mar seo:
@media screen agus (min-width: 1000px) {body {font-size: 20px; } p {dath: # 000000; {} @media screen agus (min-width: 1400px) {body {font-size: 24px; }}Thòisich a 'chiad Cheistean Meadhanan aig 1000 piogsail de leud, ag atharrachadh meud an fhuaim gu 20 piogsail. An uairsin, aon uair 'sa bha am brabhsair os cionn 1400 piogsail, dh'atharraicheadh meud an fhuaim a-rithist gu 24 pixel. Dh'fhaodadh tu a leithid de Cheistean Meadhanan a chur ris mar a dh 'fheumar airson an làrach-lìn shònraichte agad.
Mion-leud agus meud mòr
Mar as trice bidh dà dhòigh air Ceistean Meadhanan a sgrìobhadh - le bhith a 'cleachdadh "mion-leud" no le "max-width". Gu ruige seo, chunnaic sinn "mion-leud" ann an gnìomh. Tha seo ag adhbhrachadh gum bi Ceistean nam Meadhanan a 'tighinn gu buil nuair a ruigeas am brabhsair co-dhiù an leud as lugha sin. Mar sin, bidh ceist a chleachdas "min-width: 1000px" an gnìomh nuair a tha co-dhiù 1000 piogsail de leud aig a 'bhrabhsair. Thèid an stoidhle seo de Cheist nam Meadhanan a chleachdadh nuair a tha thu a 'togail làrach ann an dòigh "gluasad-sa chiad".
Ma chleachdas tu "max-width", bidh e ag obair anns an dòigh eile. Bhiodh Ceist Meadhanan de "max-width: 1000px" a 'tachairt aon uair' s gu bheil am brabhsair air tuiteam fon mheud seo.
A thaobh Bràistearan Seann
Is e aon dùbhlan le Media Queries an dìth taic aca ann an dreachan nas sine air Internet Explorer. Gu fortanach, tha luchd-poileis ri fhaighinn a dh'fhaodas taic a thoirt dhaibh airson Ceistean nam Meadhanan anns na brabhsairean nas sine sin, a 'toirt cothrom dhut an cleachdadh air làraichean-lìn an-diugh agus a' dèanamh cinnteach nach eil taisbeanadh an làraich sin a 'coimhead briste ann am bathar-bog nas sine.
Air a dheasachadh le Jeremy Girard air 1/24/17