Sidee ayaad u qori kartaa CSS Media Questions?

Mawduuca loo yaqaan 'min-wide width' iyo width-width wareysiyada

Naqshadaynta websaydhku waa hab lagu dhisayo bogagga shabakadaha halkaasoo boggagaasi ay si toos ah u bedeli karaan qaab-dhismeedkooda iyo muuqaalkooda iyadoo lagu saleynayo cabbirka tusaalaha martida . Muraayado waaweyn ayaa heli kara qaab qorshe ah oo ku habboon bandhigyada waaweyn ee waaweyn sida qalabka yaryar, sida telefoonada gacanta, waxay heli karaan isla bogga qaabka qaabka ku haboon ee shaashadan yar. Habkani wuxuu bixiyaa waaya-aragnimo fiican ee dadka isticmaala dhammaantiis, waxaana xitaa xitaa gacan ka geysan kartaa hagaajinta darajooyinka search engine . Qaybta muhiimka ah ee naqshadeynta websaydhku waa CSS Media Queries.

Waraaqaha Warbaahinta waxay u eg yihiin ereyo yar oo shuruud ah oo ku jira faylka CSS ee boggaaga, taas oo kuu ogolaaneysa inaad dejiso qawaaniinta CSS-ga oo kaliya oo saameyn doona marka xaalad gaar ah la daboolo - sida marka cabbirka boodhku ka sareeyo ama ka hooseeyo jaangooyooyinka qaarkood.

Waraaqaha Warbaahinta ee Waxqabadka

Sidee ayaad u isticmaashaa waraaqaha warbaahinta ee bogga internetka? Halkan waa tusaale fudud:

1. Waxaad ku bilaabi doontaa dukumeentiga HTML oo si fiican u qaabeysan oo aan xor ka ah nooc kasta oo muuqaal ah (taasi waa waxa CSS)
2. Foomka CSS-gaaga, waxaad ku bilaabi doontaa sida aad caadi ahaan u sameysid adigoo ku dhejinaya bogga iyo dejinta aasaasiga ah sida website-kan uu u eegi doono. U sheeg inaad dooneysey cabbirka xarafka ee bogga 16 pixels, waxaad ku qori kartaa CSS-ka: jirka {font-size: 16px; }
3. Hadda, waxaa laga yaabaa inaad doonaysid inaad kor u qaaddo cabbirka cabbirka muraayadaha waawayn ee heysta hantida maguurtada ah si aad sidaas u yeelatid. Tani waa meeshii Waraaqaha Warbaahintu ay kudhasheen. Waxaad bilaabi lahayd wareysiga warbaahinta sidan oo kale: @media screen iyo (min-width: 1000px) {}
4. Tani waa ereyga "Wareysiga Warbaahinta". Waxay ka bilaabantaa @media si ay u dhisto wareysiga Wareysiga lafteeda. Marka xigta waxaad dhigataa "nooca warbaahinta", oo kiiskani yahay "screen". Tani waxay khuseysaa kumbiyuutarada kombiyuutarka, kumbuyuutarrada, taleefannada, iwm. Ugu dambeyntii, waxaad dhamaystirtaa Wareysiga Wareysiga "qaabka warbaahinta". Tusaalaha kor ku xusan, taasi waa "dhexdhexaad: 1000px". Tani waxay ka dhigan tahay in wareysiga warbaahintu uu ku soo geli doono bandhigyada ugu yaraan 1000 pixels oo ballaaran.

1. Ka dib marka la eego qodobada wareysiga Wareysiga, waxaad ku dari kartaa furfurid xariif ah oo xiran oo la mid ah wixii aad ku qaban lahayd qaanuunka caadiga ah ee CSS.
2. Talaabada ugu dambeysa ee Wareysiga Warbaahinta waa in lagu daro xeerarka CSS ee aad rabto inaad dalbato mar haddii xaaladdan la daboolo. Waxaad ku dareysaa sharciyadan CSS ee u dhexeeya jilbaha curyaaminta ah ee ka samaysan wareysiga Wareysiga, sida tan: @media screen iyo (min-width: 1000px) {body-font-size: 20px; }
3. Marka shuruudaha wareysiga Wareysiga la buuxiyo (daaqadda browser waa ugu yaraan 1000 pixels ballaaran), qaabkani CSS ayaa saameyn doona, bedelista nooca xarafka ee bogga 16 pixfir ee aan asaas ahaan ugu aasaasnay ​​qiimaha cusub ee 20 pixels.

Ku darida Noocyo dheeraad ah

Waxaad awoodi kartaa inta badan xeerarka CSS ee gudahaan wareysiga warbaahinta markii loo baahdo si loo hagaajiyo muuqaalka muuqaalka boggaaga. Tusaale ahaan, haddii aad rabtay inaad kordhiso oo kaliya kor u qaadista font-size 20 pixels, laakiin sidoo kale bedesho midabka ah ee dhammaan qaybaha madow (# 000000), waxaad ku dari kartaa this:

@media screen iyo (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; }}

Ku darista su'aalaha warbaahin dheeraad ah

Intaa waxaa dheer, waxaad ku dari kartaa waraaqo warbaahineed oo dheeraad ah oo qiyaasta weyn oo weyn, adigoo ku daraya liiskaaga qaabka sidan oo kale:

@media screen iyo (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @media screen iyo (min-width: 1400px) {body {font-size: 24px; }}

Wargeysyada ugu horeeya ee warbaahinta ayaa bilaabi doona 1000 pixels ballaaran, iyagoo bedelaya cabbirka font ilaa 20 pixel. Kadibna, markii gambarka uu ka sarreeyaa 1400 pixels, cabirka font wuxuu mar kale isbedelayaa 24 pixels. Waxaad ku dari kartaa waraaqo badan oo warbaahin ah sida loogu baahdo boggaaga gaarka ah.

Min-Width iyo Max-Width

Waxaa jira guud ahaan laba siyaabood oo lagu qoro waraaqaha warbaahinta - adigoo isticmaalaya "min-width" ama "max-width". Illaa iyo hadda, waxaynu aragnay "min-width" ficilka. Tani waxay keenaysaa wareysiyada Warbaahinta si ay u ansixiyaan mar haddii barta shabakadu ay gaarto ugu yaraan qaybta ugu yar. Sidaa daraadeed su'aalaha isticmaalaya "min-width: 1000px" waxay isticmaali doonaan marka browserku ugu yaraan yahay 1000 pixels oo ballaaran. Qaabka noocan ah ee Wareysiga Warbaahinta waxaa loo adeegsadaa markaad dhisayso goobta "mobile-first".

Haddii aad isticmaasho "max-width", waxay u shaqeysaa qaabka ka soo horjeeda. Muuqaal wareysi ah oo ah "max-width: 1000px" ayaa lagu dabaqi doonaa marka browserku hoos u dhaco inta ka hooseysa.

Ku saabsan Browserska Waayeelka

Mid ka mid ah caqabaddaha wareysiga warbaahinta ayaa ah inayan taageero ka helin qaababkii hore ee Internet Explorer. Nasiib wanaag, waxaa jira baqshiishyo la heli karo kuwaas oo gacan ka geysan kara taageerada Macaamiisha Wareysiyada ee dukumiiyayaashii waayeelka ah, oo kuu oggolaanaya inaad iyaga u isticmaashid bogagga intarnetka iyadoo weli la hubinayo in muuqaalka bogga uusan u muuqan inuu jebiyay barnaamijkii hore ee browserka.

Waxaa sameeyay Edited by Jeremy Girard on 1/24/17