የፍርግርግ ስርዓት

ለሁሉም ቅርጾች እና መጠኖች አቀማመጦችን ለመገንባት የእኛን ኃይለኛ የሞባይል-የመጀመሪያ ፍሌክስቦክስ ፍርግርግ ተጠቀም ለአስራ ሁለት አምድ ስርዓት፣ ለስድስት ነባሪ ምላሽ ሰጭ ደረጃዎች፣ የ Sass ተለዋዋጮች እና ድብልቅ ነገሮች እና በደርዘን የሚቆጠሩ አስቀድሞ የተገለጹ ክፍሎች።

በዚህ ገጽ ላይ

ለምሳሌ

የቡትስትራፕ ፍርግርግ ስርዓት ይዘትን ለመቅረጽ እና ለማመጣጠን ተከታታይ መያዣዎችን፣ ረድፎችን እና አምዶችን ይጠቀማል። በ flexbox ነው የተሰራው እና ሙሉ በሙሉ ምላሽ ሰጭ ነው። ከታች ያለው ምሳሌ እና የፍርግርግ ስርዓቱ እንዴት እንደሚመጣ ጥልቅ ማብራሪያ ነው.

ለ flexbox አዲስ ወይም የማያውቁት? ለጀርባ፣ የቃላት አገባብ፣ መመሪያዎች እና የኮድ ቅንጥቦች ይህንን የCSS Tricks flexbox መመሪያ ያንብቡ ።

አምድ

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

ከላይ ያለው ምሳሌ ቀድመው የተገለጹትን የፍርግርግ ክፍሎቻችንን በመጠቀም በሁሉም መሳሪያዎች እና መመልከቻዎች ላይ ሶስት እኩል ስፋት ያላቸውን አምዶች ይፈጥራል። እነዚያ አምዶች ከወላጅ ጋር በገጹ ላይ ያተኮሩ ናቸው .container።

እንዴት እንደሚሰራ

እሱን ማፍረስ፣ የፍርግርግ ስርዓቱ እንዴት እንደሚሰበሰብ እነሆ፡-

የእኛ ፍርግርግ ስድስት ምላሽ ሰጪ መግቻ ነጥቦችን ይደግፋል ። መግቻ ነጥቦች በሚዲያ ጥያቄዎች ላይ የተመሰረቱ ናቸው min-width፣ ይህ ማለት በዛ ነጥብ እና ከሱ በላይ ባሉት (ለምሳሌ፣ ለ ፣፣፣፣ እና ) .col-sm-4ተፈጻሚ ይሆናሉ ። ይህ ማለት የእቃ መያዢያ እና የአምድ መጠንን እና ባህሪን በእያንዳንዱ መግቻ ነጥብ መቆጣጠር ይችላሉ።smmdlgxlxxl
ኮንቴይነሮች ይዘትዎን ወደ መሃል እና በአግድም ይሸፍኑ። ለፈሳሽ እና ለፒክሰል ስፋቶች ጥምር .containerምላሽ ለሚሰጥ የፒክሰል ስፋት፣ .container-fluidለሁሉም width: 100%የእይታ እይታዎች እና መሳሪያዎች፣ ወይም ምላሽ ሰጪ መያዣ (ለምሳሌ፣ ) ይጠቀሙ።.container-md
ረድፎች ለአምዶች መጠቅለያዎች ናቸው። እያንዳንዱ አምድ paddingበመካከላቸው ያለውን ክፍተት ለመቆጣጠር አግድም (ጎተራ ይባላል) አለው። ይህ paddingበአምዶችዎ ውስጥ ያለው ይዘት በግራ በኩል በምስላዊ መልኩ መያዙን ለማረጋገጥ በአሉታዊ ህዳጎች ረድፎች ላይ ምላሽ ይሰጣል። ረድፎች የይዘትዎን ክፍተት ለመለወጥ የአምድ መጠንን እና የጋተር ክፍሎችን በተመሳሳይ መልኩ እንዲተገብሩ የመቀየሪያ ክፍሎችን ይደግፋሉ ።
አምዶች በማይታመን ሁኔታ ተለዋዋጭ ናቸው። በአንድ ረድፍ ውስጥ 12 የአብነት አምዶች ይገኛሉ፣ ይህም ማንኛውንም የአምዶች ብዛት የሚሸፍኑ የተለያዩ ንጥረ ነገሮችን ውህዶች እንዲፈጥሩ ያስችልዎታል። የአምድ ክፍሎች የሚዘረጋውን የአብነት ዓምዶች ብዛት ያመለክታሉ (ለምሳሌ col-4፡ አራቱን ይሸፍናል)። widths በፐርሰንት ተቀናብረዋል ስለዚህም ሁልጊዜ ተመሳሳይ አንጻራዊ መጠን እንዲኖርዎት።
ጉድጓዶች እንዲሁ ምላሽ ሰጪ እና ሊበጁ የሚችሉ ናቸው። የጎተር ክፍሎች በሁሉም መግቻ ነጥቦች ላይ ይገኛሉ፣ ሁሉም ልክ እንደ ህዳግ እና ንጣፍ ክፍተት ተመሳሳይ መጠን ያላቸው ። አግዳሚ ወንዞችን .gx-*በክፍል፣ ቀጥ ያሉ ቦይዎችን በ .gy-*, ወይም ሁሉንም ጋጣዎች በክፍል ይለውጡ .g-*። .g-0ጉድጓዶችን ለማስወገድ እንዲሁ ይገኛል።
Sass ተለዋዋጮች፣ ካርታዎች እና ድብልቆች ፍርግርግ ያጎላሉ። አስቀድመው የተገለጹትን የፍርግርግ ክፍሎችን በBootstrap ውስጥ ለመጠቀም ካልፈለጉ፣ የእራስዎን በበለጠ የትርጉም ማርክ ለመፍጠር የኛን የፍርግርግ ምንጭ Sass መጠቀም ይችላሉ። እንዲሁም እነዚህን የ Sass ተለዋዋጮች ለእርስዎ የበለጠ ተለዋዋጭነት ለመጠቀም አንዳንድ የሲኤስኤስ ብጁ ንብረቶችን እናካትታለን።

አንዳንድ የኤችቲኤምኤል ክፍሎችን እንደ ተጣጣፊ መያዣዎች መጠቀም አለመቻል በ flexbox ዙሪያ ያሉትን ገደቦች እና ስህተቶች ይወቁ ።

የፍርግርግ አማራጮች

የቡትስትራፕ ፍርግርግ ሲስተም በሁሉም ስድስት ነባሪ መግቻ ነጥቦች እና በማናቸውም ማበጀት ይችላሉ። ስድስቱ ነባሪ የፍርግርግ ደረጃዎች እንደሚከተለው ናቸው

በጣም ትንሽ (xs)
ትንሽ (ኤስኤም)
መካከለኛ (ሚዲ)
ትልቅ (lg)
በጣም ትልቅ (xl)
በጣም ትልቅ (xxl)

ከላይ እንደተገለጸው፣ እነዚህ መግቻ ነጥቦች እያንዳንዳቸው የራሳቸው መያዣ፣ ልዩ የክፍል ቅድመ ቅጥያ እና ማስተካከያዎች አሏቸው። በእነዚህ መግቻ ነጥቦች ላይ ፍርግርግ እንዴት እንደሚቀየር እነሆ፦

	xs <576 ፒክስል	ኤስኤምኤስ ≥576 ፒክስል	ኤምዲ ≥768 ፒክስል	lg ≥992 ፒክስል	xl ≥1200 ፒክስል	xxl ≥1400 ፒክስል
መያዣ`max-width`	የለም (ራስ-ሰር)	540 ፒክስል	720 ፒክስል	960 ፒክስል	1140 ፒክስል	1320 ፒክስል
የክፍል ቅድመ ቅጥያ	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# የአምዶች	12
የጎርፍ ስፋት	1.5rem (.75rem በግራ እና በቀኝ)
ብጁ ጉድጓዶች	አዎ
የተደላደለ	አዎ
የአምድ ማዘዝ	አዎ

ራስ-አቀማመጥ አምዶች

ያለ ግልጽ ቁጥር ያለው እንደ ክፍል ያለ ቀላል የአምድ መጠን ለመግፈፍ ነጥብ-ተኮር የአምድ ክፍሎችን ተጠቀም .col-sm-6።

እኩል ስፋት

ለምሳሌ፣ እዚህ ሁለት የፍርግርግ አቀማመጦች እዚህ አሉ በእያንዳንዱ መሳሪያ እና መመልከቻ ከ xsእስከ xxl. ለእያንዳንዱ መግቻ ነጥብ ማንኛውንም ክፍል-ያነሰ ክፍሎችን ያክሉ እና እያንዳንዱ አምድ ተመሳሳይ ስፋት ይሆናል።

1 ከ 2

2 ከ 2

1 ከ 3

2 ከ 3

3 ከ 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

የአንድ አምድ ስፋት በማዘጋጀት ላይ

ለ flexbox ፍርግርግ አምዶች ራስ-አቀማመጥ ማለት የአንድን አምድ ስፋት ማዘጋጀት እና የወንድም እህት አምዶች በራስ-ሰር በዙሪያው እንዲቀይሩ ማድረግ ይችላሉ። አስቀድመው የተገለጹ የፍርግርግ ክፍሎችን (ከዚህ በታች እንደሚታየው) ፣ የፍርግርግ ድብልቅ ወይም የመስመር ውስጥ ስፋቶችን መጠቀም ይችላሉ። የመካከለኛው አምድ ስፋት ምንም ቢሆን ሌሎቹ ዓምዶች መጠናቸውን እንደሚቀይሩ ልብ ይበሉ።

1 ከ 3

2 ከ 3 (ሰፊ)

3 ከ 3

1 ከ 3

2 ከ 3 (ሰፊ)

3 ከ 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ተለዋዋጭ ስፋት ይዘት

col-{breakpoint}-autoበይዘታቸው ተፈጥሯዊ ስፋት ላይ በመመስረት ዓምዶችን ለመለካት ክፍሎችን ይጠቀሙ ።

1 ከ 3

ተለዋዋጭ ስፋት ይዘት

3 ከ 3

1 ከ 3

ተለዋዋጭ ስፋት ይዘት

3 ከ 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

ምላሽ ሰጪ ክፍሎች

የቡትስትራፕ ፍርግርግ ውስብስብ ምላሽ ሰጭ አቀማመጦችን ለመገንባት ስድስት ደረጃዎችን አስቀድሞ የተገለጹ ክፍሎችን ያካትታል። የአምዶችዎን መጠን በትልቁ ትንሽ፣ ትንሽ፣ መካከለኛ፣ ትልቅ ወይም በትልቁ መሳሪያዎች ላይ ያብጁ።

ሁሉም መግቻ ነጥቦች

ከትናንሾቹ መሳሪያዎች እስከ ትልቁ ተመሳሳይ ለሆኑ ፍርግርግዎች ፣ ክፍሎችን .colእና .col-*ክፍሎችን ይጠቀሙ። ልዩ መጠን ያለው አምድ ሲፈልጉ ቁጥር ያለው ክፍል ይግለጹ; ያለበለዚያ ለመጣበቅ ነፃነት ይሰማዎ .col።

ቆላ

ቆላ-8

col-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

ወደ አግድም የተደረደሩ

ነጠላ የመማሪያ ክፍሎችን በመጠቀም ፣ ተቆልሎ የሚጀምር እና በትንሹ መግቻ ነጥብ ( ) .col-sm-*ላይ አግድም የሆነ መሰረታዊ የፍርግርግ ስርዓት መፍጠር ትችላለህ ።sm

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

ማደባለቅ እና ማመሳሰል

የእርስዎ አምዶች በቀላሉ በአንዳንድ የፍርግርግ እርከኖች ውስጥ እንዲቆለሉ አይፈልጉም? እንደ አስፈላጊነቱ ለእያንዳንዱ ደረጃ የተለያዩ ክፍሎችን ጥምረት ይጠቀሙ. ሁሉም እንዴት እንደሚሰራ የተሻለ ሀሳብ ለማግኘት ከታች ያለውን ምሳሌ ይመልከቱ።

.col-md-8

.col-6 .col-md-4

.ቆላ-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

የረድፍ ዓምዶች

.row-cols-*የእርስዎን ይዘት እና አቀማመጥ በተሻለ ሁኔታ የሚሰጡትን የአምዶች ብዛት በፍጥነት ለማዘጋጀት ምላሽ ሰጪ ክፍሎችን ይጠቀሙ ። መደበኛ .col-*ክፍሎች ለነጠላ አምዶች (ለምሳሌ፣) ተፈጻሚ ሲሆኑ .col-md-4፣ የረድፍ ዓምዶች ክፍሎች በወላጅ ላይ .rowለተያዙ ዓምዶች እንደ ነባሪ ይቀመጣሉ። በእሱ አማካኝነት .row-cols-autoዓምዶቹን ተፈጥሯዊ ስፋታቸውን መስጠት ይችላሉ.

መሰረታዊ የፍርግርግ አቀማመጦችን በፍጥነት ለመፍጠር ወይም የካርድ አቀማመጦችን ለመቆጣጠር እና በአምድ ደረጃ ሲያስፈልግ ለመሻር እነዚህን የረድፍ አምዶች ክፍሎች ተጠቀም።

አምድ

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

አምድ

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

አምድ

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

አምድ

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

አምድ

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

አምድ

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

አምድ

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

እንዲሁም ተጓዳኝ የ Sass ድብልቅን መጠቀም ይችላሉ row-cols()፡-

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

መክተቻ

ይዘትዎን ከነባሪው ፍርግርግ ጋር ለመክተት አሁን ባለው አምድ ውስጥ አዲስ እና የአምዶች .rowስብስብ ያክሉ። የጎጆ ረድፎች እስከ 12 ወይም ከዚያ በታች የሚጨምሩ የአምዶች ስብስብ ማካተት አለባቸው (ሁሉንም ያሉትን 12 አምዶች መጠቀም አያስፈልግም)።.col-sm-*.col-sm-*

ደረጃ 1: .col-sm-3

ደረጃ 2፡.col-8 .col-sm-6

ደረጃ 2፡ .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

ሳስ

የBootstrap ምንጭ Sass ፋይሎችን ሲጠቀሙ፣ ብጁ፣ የትርጉም እና ምላሽ ሰጪ ገጽ አቀማመጦችን ለመፍጠር Sass ተለዋዋጮችን እና ድብልቅ ነገሮችን የመጠቀም አማራጭ ይኖርዎታል። ለፈጣን ምላሽ ሰጪ አቀማመጦች አጠቃላይ ለአገልግሎት ዝግጁ የሆኑ ክፍሎችን ለማቅረብ የእኛ አስቀድሞ የተገለጹ የፍርግርግ ክፍሎቻችን እነዚህን ተመሳሳይ ተለዋዋጮች እና ድብልቆች ይጠቀማሉ።

ተለዋዋጮች

ተለዋዋጮች እና ካርታዎች ተንሳፋፊ ዓምዶች የሚጀምሩበት የአምዶች ብዛት፣ የጉድጓድ ስፋት እና የሚዲያ መጠይቁን ይወስናሉ። ከላይ የተዘረዘሩትን አስቀድሞ የተገለጹትን የፍርግርግ ክፍሎችን እና እንዲሁም ከዚህ በታች ለተዘረዘሩት ብጁ ድብልቅ ነገሮች ለማምረት እነዚህን እንጠቀማለን።

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

ቅልቅል

ሚክሰኖች ከግሪድ ተለዋዋጮች ጋር በጥምረት ጥቅም ላይ የሚውሉት ለግል ፍርግርግ አምዶች የፍቺ CSS ነው።

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

የአጠቃቀም ምሳሌ

ተለዋዋጮቹን ወደ ራስህ ብጁ እሴቶች መቀየር ትችላለህ፣ ወይም ድብልቁን ከነባሪ እሴቶቻቸው ጋር ብቻ ተጠቀም። ባለ ሁለት አምድ አቀማመጥ በመካከላቸው ክፍተት ለመፍጠር ነባሪ ቅንብሮችን የመጠቀም ምሳሌ እዚህ አለ።

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

ዋና ይዘት

ሁለተኛ ደረጃ ይዘት

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ፍርግርግ ማበጀት

አብሮ የተሰራውን የSass ተለዋዋጮችን እና ካርታዎችን በመጠቀም፣ አስቀድሞ የተገለጹትን የፍርግርግ ክፍሎችን ሙሉ ለሙሉ ማበጀት ይቻላል። የደረጃዎች ብዛት፣ የሚዲያ መጠይቅ ልኬቶችን እና የመያዣውን ስፋቶችን ይቀይሩ—ከዚያም እንደገና ያሰባስቡ።

አምዶች እና ጉድጓዶች

የፍርግርግ ዓምዶች ብዛት በ Sass ተለዋዋጮች በኩል ሊስተካከል ይችላል። $grid-columnsየእያንዳንዱን አምድ ስፋቶችን (በመቶኛ) ለማመንጨት ጥቅም ላይ የሚውል ሲሆን ለዓምዱ ወራጆች $grid-gutter-widthስፋቱን ሲያዘጋጅ።

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

የፍርግርግ ደረጃዎች

ከአምዶች እራሳቸው አልፈው በመሄድ፣ የፍርግርግ እርከኖችን ብዛት ማበጀት ይችላሉ። አራት የፍርግርግ እርከኖችን ብቻ ከፈለጉ፣ ይህን $grid-breakpointsእና ወደሚከተለው $container-max-widthsነገር አዘምነው ነበር።

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

በ Sass ተለዋዋጮች ወይም ካርታዎች ላይ ማናቸውንም ለውጦች ሲያደርጉ ለውጦችዎን ማስቀመጥ እና እንደገና ማሰባሰብ ያስፈልግዎታል። ይህን ማድረግ ለአምድ ስፋቶች፣ ማካካሻዎች እና ቅደም ተከተሎች አዲስ የተገለጹ የፍርግርግ ክፍሎችን ያወጣል። ምላሽ ሰጪ የታይነት መገልገያዎች ብጁ መግቻ ነጥቦችን ለመጠቀም እንዲሁ ይዘመናሉ። pxየፍርግርግ እሴቶችን በ (አይደለም rem፣ em፣ ወይም %) ውስጥ ማቀናበሩን ያረጋግጡ ።