тЖФя╕П рдПрдХ рдЯреВрд▓рдХрд┐рдЯ,
рдкреНрд░рддреНрдпреЗрдХ рдбрд┐рдЬрд╝рд╛рдЗрди рдХрд╛рд░реНрдп

рдХреНрд▓реИрдореНрдк рдХреИрд▓рдХреБрд▓реЗрдЯрд░

CSS clamp() рдХреЗ рд╕рд╛рде рдлреНрд▓реБрдЗрдб рдЯрд╛рдЗрдкреЛрдЧреНрд░рд╛рдлреА рдмрдирд╛рдПрдВред рдиреНрдпреВрдирддрдо, рдкрд╕рдВрджреАрджрд╛ рдФрд░ рдЕрдзрд┐рдХрддрдо рдЖрдХрд╛рд░ рд╕реЗрдЯ рдХрд░реЗрдВ тАФ рдкрд░рдлреЗрдХреНрдЯ clamp() рдлрд╝реЙрд░реНрдореВрд▓рд╛ рдФрд░ рд╡рд┐рдЬрд╝реБрдЕрд▓ рд╕реНрдХреЗрд▓ рдкреНрд░реАрд╡реНрдпреВ рдкрд╛рдПрдБред

English ф╕нцЦЗ цЧецЬмшкЮ эХЬъ╡ньЦ┤ Espa├▒ol Portugu├кs Fran├зais Deutsch ╪з┘Д╪╣╪▒╪и┘К╪й рд╣рд┐рдиреНрджреА р╣Др╕Чр╕в Tiс║┐ng Viс╗Зt Bahasa ╨а╤Г╤Б╤Б╨║╨╕╨╣

тЖФя╕П рдХреНрд▓реИрдореНрдк рдХреИрд▓рдХреБрд▓реЗрдЯрд░

Clamp рдлрд╝рдВрдХреНрд╢рди рдЧрд╛рдЗрдб

clamp() рдПрдХ CSS рдЧрдгрд┐рдд рдлрд╝рдВрдХреНрд╢рди рд╣реИ рдЬреЛ рдорд╛рди рдХреЛ рдиреНрдпреВрдирддрдо рдФрд░ рдЕрдзрд┐рдХрддрдо рдХреЗ рдмреАрдЪ рд╕реЗрдЯ рдХрд░рддрд╛ рд╣реИ: clamp(MIN, VAL, MAX)ред VAL рдЬрдм рддрдХ MIN рдФрд░ MAX рдХреЗ рдмреАрдЪ рд░рд╣рддрд╛ рд╣реИ рддрдм рддрдХ VAL рд▓реМрдЯрд╛рддрд╛ рд╣реИ тАФ VAL рдХреЗ MIN рд╕реЗ рдиреАрдЪреЗ рдЬрд╛рдиреЗ рдкрд░ MIN, рдФрд░ MAX рд╕реЗ рдКрдкрд░ рдЬрд╛рдиреЗ рдкрд░ MAX рд▓реМрдЯрд╛рддрд╛ рд╣реИред рдЗрд╕рд╕реЗ рдореАрдбрд┐рдпрд╛ рдХреНрд╡реЗрд░реА рдХреЗ рдмрд┐рдирд╛ рдлреНрд▓реБрдЗрдб рдЯрд╛рдЗрдкреЛрдЧреНрд░рд╛рдлреА рд╕рдВрднрд╡ рд╣реЛрддреА рд╣реИред

рдиреНрдпреВрдирддрдо рдФрд░ рдЕрдзрд┐рдХрддрдо рдлрд╝реЙрдиреНрдЯ рдЖрдХрд╛рд░ рд╕реЗрдЯ рдХрд░реЗрдВ, рд╕рд╛рде рд╣реА рд╡рд╣ рд╡реНрдпреВрдкреЛрд░реНрдЯ рд░реЗрдВрдЬ рдЬрд╣рд╛рдБ рд╕реНрдХреЗрд▓рд┐рдВрдЧ рд╣реЛрддреА рд╣реИред рдЯреВрд▓ рдкрд░рдлреЗрдХреНрдЯ vw-рдЖрдзрд╛рд░рд┐рдд рдлрд╝реЙрд░реНрдореВрд▓рд╛ рдирд┐рдХрд╛рд▓рддрд╛ рд╣реИ рдФрд░ рдЫрд╣ рд╡реНрдпреВрдкреЛрд░реНрдЯ рдЪреМрдбрд╝рд╛рдИ рдкрд░ рдлрд╝реЙрдиреНрдЯ рдЖрдХрд╛рд░ рдХрд╛ рдкреНрд░реАрд╡реНрдпреВ рджрд┐рдЦрд╛рддрд╛ рд╣реИ, рд╕рд╛рде рд╣реА рдкреВрд░реА рд░реЗрдВрдЬ рдореЗрдВ рдЖрдХрд╛рд░ рдмрджрд▓рдиреЗ рдХрд╛ рд╡рдХреНрд░ред

Pro Tips

Frequently Asked Questions

Q: CSS clamp() рдХреНрдпрд╛ рдХрд░рддрд╛ рд╣реИ?
CSS clamp() рдХреНрдпрд╛ рдХрд░рддрд╛ рд╣реИ? clamp(MIN, VAL, MAX) MIN рдФрд░ MAX рдХреЗ рдмреАрдЪ рдХрд╛ рдорд╛рди рдЪреБрдирддрд╛ рд╣реИред VAL, MIN рд╕реЗ рдЫреЛрдЯрд╛ рд╣реЛ рддреЛ MIN, MAX рд╕реЗ рдмрдбрд╝рд╛ рд╣реЛ рддреЛ MAX, рд╡рд░рдирд╛ VAL рд▓реМрдЯрд╛рддрд╛ рд╣реИред рдлреНрд▓реБрдЗрдб рдЖрдХрд╛рд░реЛрдВ рдХреЗ рд▓рд┐рдП рдкрд░рдлреЗрдХреНрдЯ рдЬреЛ рди рдХрднреА рдмрд╣реБрдд рдЫреЛрдЯреЗ рд╣реЛрдВ рди рдмрд╣реБрдд рдмрдбрд╝реЗред
Q: clamp() min() рдФрд░ max() рд╕реЗ рдХреИрд╕реЗ рдЕрд▓рдЧ рд╣реИ?
clamp() min() рдФрд░ max() рд╕реЗ рдХреИрд╕реЗ рдЕрд▓рдЧ рд╣реИ? min() рд╕рдмрд╕реЗ рдЫреЛрдЯрд╛ рдорд╛рди рдЪреБрдирддрд╛ рд╣реИ, max() рд╕рдмрд╕реЗ рдмрдбрд╝рд╛, рдФрд░ clamp() рджреЛрдиреЛрдВ рдХреЛ рдЬреЛрдбрд╝рддрд╛ рд╣реИ: рдордзреНрдп рдорд╛рди рдХреЛ рдирд┐рдЪрд▓реА рдФрд░ рдКрдкрд░реА рд╕реАрдорд╛ рдХреЗ рдмреАрдЪ рдмрд╛рдБрдзрддрд╛ рд╣реИред clamp() рдлреНрд▓реБрдЗрдб рдЯрд╛рдЗрдкреЛрдЧреНрд░рд╛рдлреА рдХрд╛ рдореБрдЦреНрдп рд╣рдерд┐рдпрд╛рд░ рд╣реИред
Q: рдХреНрдпрд╛ clamp() рд╕рднреА рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдореЗрдВ рд╕рдкреЛрд░реНрдЯреЗрдб рд╣реИ?
рдХреНрдпрд╛ clamp() рд╕рднреА рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдореЗрдВ рд╕рдкреЛрд░реНрдЯреЗрдб рд╣реИ? рд╣рд╛рдБред clamp(), min() рдФрд░ max() 2020 рд╕реЗ рд╕рднреА рдЖрдзреБрдирд┐рдХ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдореЗрдВ рд╕рдкреЛрд░реНрдЯреЗрдб рд╣реИрдВ (Chrome 79+, Firefox 75+, Safari 13.1+)ред
Q: рдлреНрд▓реБрдЗрдб рдЯрд╛рдЗрдкреЛрдЧреНрд░рд╛рдлреА рдХреЗ рд▓рд┐рдП рдХреМрди рд╕реЗ рд╡реНрдпреВрдкреЛрд░реНрдЯ рдЖрдХрд╛рд░ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ?
рдлреНрд▓реБрдЗрдб рдЯрд╛рдЗрдкреЛрдЧреНрд░рд╛рдлреА рдХреЗ рд▓рд┐рдП рдХреМрди рд╕реЗ рд╡реНрдпреВрдкреЛрд░реНрдЯ рдЖрдХрд╛рд░ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ? рд╕рд╛рдорд╛рдиреНрдп рд╕рд╛рдЗрдЯреЛрдВ рдХреЗ рд▓рд┐рдП 320px-1200px, рдореЛрдмрд╛рдЗрд▓-рдлрд░реНрд╕реНрдЯ рдкреНрд░реЛрдЬреЗрдХреНрдЯреНрд╕ рдХреЗ рд▓рд┐рдП 360px-768px рдЖрдо рд╣реИрдВред vmax рд╕реЗ рдЖрдЧреЗ рдЖрдХрд╛рд░ рдЕрдзрд┐рдХрддрдо рдкрд░ рд╕реНрдерд┐рд░ рд░рд╣рддрд╛ рд╣реИ тАФ рдпрд╣ рдЬрд╛рдирдмреВрдЭрдХрд░ рд╣реИред
Q: рдХреНрдпрд╛ clamp() рдХреЛ рд╕реНрдкреЗрд╕рд┐рдВрдЧ рдХреЗ рд▓рд┐рдП рднреА рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ?
рдХреНрдпрд╛ clamp() рдХреЛ рд╕реНрдкреЗрд╕рд┐рдВрдЧ рдХреЗ рд▓рд┐рдП рднреА рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ? рд╣рд╛рдБред рдлреНрд▓реБрдЗрдб рдкреИрдбрд┐рдВрдЧ рдФрд░ рдЧреИрдк рд╡рд╣реА рдлрд╝реЙрд░реНрдореВрд▓рд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ: clamp(16px, 4vw, 48px)ред рдлреНрд▓реБрдЗрдб рд╕реНрдкреЗрд╕рд┐рдВрдЧ рдмрд┐рдирд╛ рдЕрддрд┐рд░рд┐рдХреНрдд рдореАрдбрд┐рдпрд╛ рдХреНрд╡реЗрд░реА рдХреЗ рдбрд┐рд╡рд╛рдЗрд╕реЛрдВ рдХреЗ рдмреАрдЪ рд▓рдп рдмрдирд╛рдП рд░рдЦрддреА рд╣реИред

рднрд╛рд░рддреАрдп рд░рдВрдЧ

рдХреЗрд╕рд░рд┐рдпрд╛ рд╕реЗ рд▓реЗрдХрд░ рдиреАрд▓ рддрдХ, рднрд╛рд░рддреАрдп рд░рдВрдЧ рддреНрдпреЛрд╣рд╛рд░реЛрдВ, рд╡рд╕реНрддреНрд░реЛрдВ рдФрд░ рдкреНрд░рдХреГрддрд┐ рд╕реЗ рдЬрдиреНрдореЗ рд╣реИрдВред рд╣реЛрд▓реА рдХреЗ рдЧреБрд▓рд╛рд▓, рдореЗрдВрд╣рджреА рдХреА рд╣рд░рд┐рдпрд╛рд▓реА рдФрд░ рдордВрджрд┐рд░реЛрдВ рдХрд╛ рд╕рд┐рдВрджреВрд░реА тАФ рд╣рд░ рд░рдВрдЧ рдХреА рдПрдХ рдХрд╣рд╛рдиреА рд╣реИред

рдХреЗрд╕рд░рд┐рдпрд╛ #FF9933

рддрд┐рд░рдВрдЧреЗ рдХрд╛ рдХреЗрд╕рд░рд┐рдпрд╛ тАФ рд╕рд╛рд╣рд╕ рдФрд░ рдмрд▓рд┐рджрд╛рди рдХрд╛ рдкреНрд░рддреАрдХ

рд╣рд░рд╛ #138808

рддрд┐рд░рдВрдЧреЗ рдХрд╛ рд╣рд░рд╛ тАФ рдЙрд░реНрд╡рд░рддрд╛ рдФрд░ рд╕рдореГрджреНрдзрд┐

рдЕрд╢реЛрдХ рдЪрдХреНрд░ рдиреАрд▓рд╛ #000080

рддрд┐рд░рдВрдЧреЗ рдХреЗ рдХреЗрдВрджреНрд░ рдореЗрдВ рдзрд░реНрдо рдЪрдХреНрд░ рдХрд╛ рдиреАрд▓рд╛

рдЧреБрд▓рд╛рдмреА #FF007F

рдЬрдпрдкреБрд░ рдХрд╛ рдЧреБрд▓рд╛рдмреА рд╢рд╣рд░ рдФрд░ рд░рд╛рдЬрд╕реНрдерд╛рдиреА рдкрдЧрдбрд╝рд┐рдпрд╛рдБ

рд╣рд▓реНрджреА #E3A857

рд╣рд▓реНрджреА рдХрд╛ рдкреАрд▓рд╛ тАФ рд╢реБрднрддрд╛ рдФрд░ рд╡рд┐рд╡рд╛рд╣ рдХрд╛ рд░рдВрдЧ

рдЧреЗрд░реВ #CC7722

рд╕рд╛рдзреБрдУрдВ рдХреЗ рд╡рд╕реНрддреНрд░ рдФрд░ рдордВрджрд┐рд░реЛрдВ рдХрд╛ рдорд┐рдЯреНрдЯреА рд░рдВрдЧ

рдиреАрд▓ #4B0082

рдкреНрд░рд╛рдЪреАрди рднрд╛рд░рдд рдХрд╛ рдиреАрд▓ рд░рдВрдЧ тАФ рдиреАрд▓ рдХреА рдЦреЗрддреА рд╕реЗ

рд╕рд┐рдВрджреВрд░реА #E34234

рд╕рд┐рдВрджреВрд░ рдХрд╛ рд▓рд╛рд▓ тАФ рд╕реБрд╣рд╛рдЧ рдФрд░ рд╢рдХреНрддрд┐ рдХрд╛ рдкреНрд░рддреАрдХ

рдЧреЗрдВрджрд╛ #FFA500

рдЧреЗрдВрджреЗ рдХреЗ рдлреВрд▓реЛрдВ рдХрд╛ рдирд╛рд░рдВрдЧреА тАФ рдкреВрдЬрд╛ рдФрд░ рддреНрдпреЛрд╣рд╛рд░

рдореЗрд╣рдВрджреА #6B8E23

рдореЗрд╣рдВрджреА рдХреА рд╣рд░рд┐рдпрд╛рд▓реА тАФ рд╢рд╛рджреА рдФрд░ рддреАрдЬ рдХрд╛ рд░рдВрдЧ

Q: рдХреЗрд╕рд░рд┐рдпрд╛ рд░рдВрдЧ рдХреНрдпрд╛ рд╣реИ?
рдХреЗрд╕рд░рд┐рдпрд╛ рд░рдВрдЧ рдХреНрдпрд╛ рд╣реИ? рдХреЗрд╕рд░рд┐рдпрд╛ (#FF9933) рднрд╛рд░рдд рдХреЗ рд░рд╛рд╖реНрдЯреНрд░реАрдп рдзреНрд╡рдЬ рдХрд╛ рд╕рдмрд╕реЗ рдКрдкрд░реА рд░рдВрдЧ рд╣реИ, рдЬреЛ рд╕рд╛рд╣рд╕ рдФрд░ рдмрд▓рд┐рджрд╛рди рдХрд╛ рдкреНрд░рддреАрдХ рд╣реИред рдпрд╣ рдХреЗрд╕рд░ (saffron) рд╕реЗ рдмрдирд╛ рд░рдВрдЧ рд╣реИ рдЬреЛ рд╕рд╛рдзреБрдУрдВ рдХреЗ рд╡рд╕реНрддреНрд░реЛрдВ рдореЗрдВ рднреА рджрд┐рдЦрддрд╛ рд╣реИред
Q: рд╣реЛрд▓реА рдХреЗ рд░рдВрдЧ рдХреНрдпрд╛ рд╣реИрдВ?
рд╣реЛрд▓реА рдХреЗ рд░рдВрдЧ рдХреНрдпрд╛ рд╣реИрдВ? рд╣реЛрд▓реА рдореЗрдВ рдЧреБрд▓рд╛рд▓ рдХреЗ рдЧреБрд▓рд╛рдмреА (#FF007F), рдкреАрд▓рд╛ (#FFD700) рдФрд░ рд╣рд░рд╛ (#138808) рдкреНрд░рдореБрдЦ рд╣реИрдВред рдпреЗ рд░рдВрдЧ рд╡рд╕рдВрдд, рдкреНрд░реЗрдо рдФрд░ рдирдИ рдлрд╕рд▓ рдХреЗ рдЙрддреНрд╕рд╡ рдХрд╛ рдкреНрд░рддреАрдХ рд╣реИрдВред