Hordhac ku saabsan Media Queries

Media queries waa qayb muhiim ah oo ka mid ah web design-ka jawaabcelinta leh. Waxay kuu sahlayaan inaad ku dabaqdo qaabab kala duwan iyadoo ku xiran qalabka (device) uu isticmaaluhu ku daawanayo website-kaaga. Tusaale ahaan, waxaad website-ka u qaabayn kartaa si ka duwan telefoonada, tablet-yada, iyo computer-ada.

Qaabdhismeedka Media Query

Media query waxa ay ka kooban tahay nooca warbaahinta (media type) iyo shuruudo (conditions). Haddii shuruuduhu buuxiyaan, qaababka ku jira media query ayaa la dabaqayaa.

@media (max-width: 600px) {
  /* Qaababka telefoonada */
  body {
    font-size: 16px;
  }
}
@media (min-width: 601px) and (max-width: 1024px) {
/* Qaababka tablet-yada */
body {
font-size: 18px;
}
}
@media (min-width: 1025px) {
/* Qaababka computer-ada */
body {
font-size: 20px;
}
}

Sharaxaada koodhka:

• @media: Waxay tilmaamaysaa bilowga media query.
• (max-width: 600px): Tani waa shuruudda. Waxay tilmaamaysaa in qaababkan la dabaqi doono haddii ballaca shaashadu uu ka yar yahay ama la siman yahay 600 pixels.
• body { font-size: 16px; }: Kani waa qaabka la dabaqayo haddii shuruuddu buuxiso.

Noocyada Warbaahinta (Media Types)

Waxaa jira noocyo badan oo warbaahineed, laakiin kuwa ugu badan ee la isticmaalo waa:

• all: Dhammaan qalabka.
• screen: Qalabka shaashadda leh, sida computer-ada, telefoonada, iyo tablet-yada.
• print: Marka la daabacayo bogga.

Sifooyinka Warbaahinta (Media Features)

Waxaa jira sifooyin badan oo warbaahineed oo aad isticmaali karto, sida:

• width: Ballaca shaashadda.
• height: Dhererka shaashadda.
• orientation: Haddii qalabku yahay mid toosan (portrait) ama mid jiif ah (landscape).
• resolution: Cufnaanta pixels ee shaashadda.

Tusaale: Website Jawaabcelin ah

Aan sameyno tusaale fudud oo ah website jawaabcelin ah. Waxaan u isticmaali doonnaa media queries si aan u beddelno qaabka navigation-ka marka shaashadu yaraato.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
}
/* Marka shaashadu yaraato, navigation-ka waxaan u rogi doonnaa mid toosan */
@media (max-width: 600px) {
nav ul {
flex-direction: column;
align-items: center;
}
nav li {
margin-bottom: 10px;
}
}

Koodhkani waxa uu navigation-ka ka dhigayaa mid jiifa marka shaashadu weyn tahay, iyo mid toosan marka shaashadu yaraato.

Gabagabo

Media queries waa aalad aad u awood badan oo kuu sahlaysa inaad abuurto website-yo jawaabcelin ah oo si fiican ugu shaqaynaya qalab kasta. Barashada sida loo isticmaalo media queries waa muhiim haddii aad rabto inaad noqoto web developer xirfad leh.