Ny antontan'isa ho an'ny fangataham-pitenenana bitika kely sy malalaka
Ny famoronana tranonkala manitikitika dia fomba iray hanamboarana tranonkala ahafahan'ireo pejy ireo manova ny endrik'izy ireo sy ny endriny mifototra amin'ny habeny maotera . Ireo lehibe lehibe dia afaka mahazo layout mifanandrify amin'ireo fampisehoana lehibe ireo raha kely kokoa ny fitaovana kely toy ny finday, dia afaka mahazo ilay tranokala iray mitovy endrika amin'ny fomba mety ho an'ny efijery kely. Ity fomba ity dia manome ny traikefan'ny mpampiasa misimisy kokoa ho an'ireo mpampiasa rehetra ary afaka manampy amin'ny fanatsarana ny lozam-pikarohana fikarohana . Ny ampahany manan-danja amin'ny famolavolana tranonkala dia ny CSS Media Queries.
Ireo Queries Media dia toy ny fanambarana tsy misy fepetra ao amin'ny rakitra CSS ao amin'ny tranonkalanao, izay mamela anao hametraka fitsipika sasan-tsarimihetsika sasantsasany izay vao mainka hampisy fiantraikany indray mandeha raha misy fepetra voafaritra iray - toy ny hoe ny haben'ny habaka dia eo ambony na eo ambanin'ny sasantsasany.
Media Queries amin'ny asa
Ahoana no fomba ampiasanao fampahalalam-baovao Media amin'ny tranonkala iray? Ity misy ohatra tena tsotra:
- Azonao atao ny manomboka amin'ny doka HTML manana endrika tsara ary tsy misy endrika sary (izany no atao hoe CSS)
- Ao amin'ny antontan-taratasinao CSS, dia manomboka toy ny mahazatra ianao amin'ny alalan'ny fananganana ilay pejy ary mametraka loharano iray hijerena ny fijerin'ny tranonkala. Lazao fa tadiavinao ho 16 pixels ny haben'io pejy io, azonao soratana ity CSS ity: body {font-size: 16px; }
- Ankehitriny, azonao atao ny mampitombo io habeo lehibe io ho an'ny efijery lehibe izay manana trano ampy tsara hanaovana izany. Eto ny Media Queries dia miditra ao. Hanomboka Media Query toy izao ianao: @media screen ary (min-width: 1000px) {}
- Ity no fehezan-kevitry ny Media Query. Manomboka amin'ny @media hanangana ny Media Query izy tenany. Manaraka ny "karazana fampahalalam-baovao" ianao, izay "screens" amin'ity tranga ity. Izany dia mihatra amin'ny screenshots, solosaina, telefaona, sns. Farany, mamarana ny Media Query miaraka amin'ny "fampisehoana amin'ny media" ianao. Ao amin'ny ohatra asehontsika etsy ambony, izany dia "mid-width: 1000px". Midika izany fa hivoaka ny Media Query amin'ny fampisehoana miaraka amin'ny habe farafahakeliny 1000 pixel ny sakany.
- Aorian'ireo singa ao amin'ny Media Query, dia ampidirinao ny fiatoana fanokafana sy ny fanakatonana mitovy amin'ny zavatra hataonao amin'ny fitsipika CSS rehetra.
- Ny dingana farany amin'ny Media Query dia ny manampy ny fitsipika CSS izay tianao hampiharina raha vao vita ny fepetra. Ampifandraisinao ireo fitsipika CSS ireo eo anelanelan'ny fantson-kibo manangona ny Media Query, toy izao: sary @media ary (minus width: 1000px) {body {font-size: 20px; }
- Raha toa ka mihaona ny fepetra momba ny Media Query (raha kely indrindra 1000 pixel ny varavarankely), ity style CSS ity dia hanan-kery, manova ny haben'io tranonkalan'ny habaka io amin'ny 16 piksela napetrakay voalohany amin'ny sanda vaovao misy 20 pixels.
Manampy Styles bebe kokoa
Afaka mametraka fitsipika maro ao amin'ny QSS ianao ao anatin'ity Media Query ity araka izay ilaina mba hanitsiana ny fisehon'ny sehatry ny tranonkalanao. Ohatra, raha tsy te-hampitombo fotsiny ny habe-doko amin'ny 20 pixels ianao, fa manova ny lokon'ny fehintsoratra rehetra amin'ny mainty (# 000000), azonao atao ny manampy izany:
Dikan'ny @media ary (min-width: 1000px) {vatana {font-size: 20px; } p {color: # 000000; }}Manampaha fanadinana media bebe kokoa
Ankoatra izany, afaka manampy loharanom-baovao maromaro kokoa ianao amin'ny isam-bolana lehibe rehetra, ka ampidiro ao amin'ny style style toy izao:
Dikan'ny @media ary (min-width: 1000px) {vatana {font-size: 20px; } p {color: # 000000; {} ny @media ary ny habe (minitra: 1400px) {vatana {font-size: 24px; }}Ny voalohany Queries Media dia handona amin'ny 1000 pixel amin'ny lafiny malalaka, manova ny haben'ny fanoratana mankany amin'ny 20 pixels. Avy eo, raha vao mihoatra ny 1400 pixels ny browser dia miova ho 24 pixels indray ny habe. Azonao atao ny mampiditra marobe Media maro araka izay ilainao amin'ny tranokalanao manokana.
Mivelatra ny elanelam-potoana sy max
Amin'ny ankapobeny dia misy fomba roa hanoratana ny Media Queries - amin'ny fampiasana "min-width" na "max-width". Hatreto, efa nahita "min-width" izahay tamin'ny asa. Izany dia mahatonga ny Queries Media hampihetsika raha vao nahatratra ny habe farafahakeliny farafaharatsiny. Noho izany ny fangatahana mampiasa "min-width: 1000px" dia hampiharina rehefa farafahakeliny 1000 pixel ny habe. Ity fomba fanalahidin'ny Media Query ity dia ampiasaina rehefa manangana tranokala amin'ny fomba "mobile-voalohany" ianao.
Raha mampiasa "max-width" ianao dia miasa amin'ny fomba mifanohitra amin'izany. Ny Media Query an'ny "max-width: 1000px" dia ampiharina raha vao latsaka ambany dia ambany ny habaka.
Momba ny Browsers taloha
Ny fanamby iray amin'ny Media Queries dia ny tsy fahampian'ny fanohanana amin'ny dikan-teny taloha ao amin'ny Internet Explorer. Soa ihany fa misy ny fametraham-piraketana izay afaka manohana ny Media Queries amin'ireo browsers taloha ireo, izay mamela azy ireo hampiasa azy ireo amin'ny tranonkala amin'izao fotoana izao raha mbola manome toky fa ny fampisehoana an'io tranonkala io dia tsy mijery ny rindrambaiko taloha.
Edited by Jeremy Girard on 1/24/17