ОблоТка канала

WebDEV

19233 @webb_dev

Канал ΠΎ web-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅. Новости IT, Ρ‚ΡƒΡ‚ΠΎΡ€ΠΈΠ°Π»Ρ‹, Π²Π΅Π±-ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

WebDEV

6 Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄
ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π²
πŸ’‘ Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΈ эффСктивныС CSS-раскладки

β–Π§Π°ΡΡ‚ΡŒ 14

ΠŸΠ΅Ρ€Π΅Π΄ ΠΏΡ€ΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ΠΌ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с ΠΏΠ΅Ρ€Π²ΠΎΠΉ, Π²Ρ‚ΠΎΡ€ΠΎΠΉ, Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΉ, Ρ‡Π΅Ρ‚Π²Ρ‘Ρ€Ρ‚ΠΎΠΉ, пятой, ΡˆΠ΅ΡΡ‚ΠΎΠΉ, сСдьмой, восьмой, дСвятой, дСсятой, ΠΎΠ΄ΠΈΠ½Π½Π°Π΄Ρ†Π°Ρ‚ΠΎΠΉ, Π΄Π²Π΅Π½Π°Π΄Ρ†Π°Ρ‚ΠΎΠΉ ΠΈ Ρ‚Ρ€ΠΈΠ½Π°Π΄Ρ†Π°Ρ‚ΠΎΠΉ частями.

Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ познакомимся с Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠ΅ΠΉ, ΠΌΠ΅Π½Π΅Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΠΎΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, Π½ΠΎ сущСствСнно Π²Π»ΠΈΡΡŽΡ‰Π΅ΠΉ Π½Π° ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° интСрфСйсов. Π’ Π΄Π΅ΠΌΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ Π½Π°ΠΉΠ΄Ρ‘Ρ‚Π΅ ΠΏΠΎΠ΄ этим постом, ΡˆΠΈΡ€ΠΈΠ½Π° задаётся с использованиСм Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ 'clamp': width: clamp(<min>, <actual>, <max>).

Она позволяСт Π·Π°Π΄Π°Ρ‚ΡŒ минимальноС, ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΠΎΠ΅ ΠΈ максимальноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

.parent {
width: clamp(23ch, 50%, 46ch);
}

Π—Π΄Π΅ΡΡŒ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ - 23ch ΠΈΠ»ΠΈ 23 Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ символа, Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ - 46ch. Π•Π΄ΠΈΠ½ΠΈΡ†Ρ‹ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ символа ΠΎΡΠ½ΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π½Π° Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° элСмСнта (Π² частности, ΡˆΠΈΡ€ΠΈΠ½Π΅ Π³Π»ΠΈΡ„Π° 0). ΠŸΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΠ°Ρ ΠΈΠ»ΠΈ "фактичСская" ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ равняСтся 50%, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ 50% ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ слСдуСт...

#совСты #coding #css