Responsive Typography with CSS Clamp

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 พ.ย. 2024

ความคิดเห็น • 40

  • @dzsuvi
    @dzsuvi 2 หลายเดือนก่อน +3

    Never used clamp before because I didn't understand how it work. I do now. You've got a new sub! Thanks

  • @thexpand
    @thexpand ปีที่แล้ว +16

    Great video. I have a few suggestions, though - it would be better to use 1rem + 8vw for the second argument of the clamp function to be able to scale the text depending on browser zoom or user preferences for font size. Also, the same goes for using rems instead of pixels (in your case 50px and 100px would probably be best replaced with non-fixed values).

  • @CrispyCircuits
    @CrispyCircuits หลายเดือนก่อน

    I had no idea how to set the middle value despite seeing it used in many videos. All clear now. Liked and subscribed now. Don't let me down, keep me properly sized. 😜

  • @elAmigo805
    @elAmigo805 2 หลายเดือนก่อน +1

    Awsome, this solves an issue I was having. Thanks

  • @chrisicotec7652
    @chrisicotec7652 6 หลายเดือนก่อน +2

    i was always confsed as to how clamp worked, but i found this channel, now it all makes sense .... you got a new sub

  • @koresaliva
    @koresaliva 4 หลายเดือนก่อน +1

    Extremely helpful thank you!

  • @mikhaillav
    @mikhaillav 3 หลายเดือนก่อน +1

    Thank you so much! Really helpful ✌️

  • @ClarkeDesign
    @ClarkeDesign 2 หลายเดือนก่อน +4

    Should you not be using rem or em instead of px for the max and min sizes?

  • @johan.svensson
    @johan.svensson 4 หลายเดือนก่อน +1

    Great tutorial. Thank you.

  • @adityarajgor6763
    @adityarajgor6763 ปีที่แล้ว

    Best video so far

  • @victoradeniji4554
    @victoradeniji4554 9 หลายเดือนก่อน +1

    Awesome video. Thank you so much.

    • @tomisloading
      @tomisloading  9 หลายเดือนก่อน

      Happy to help! :)

  • @ooomb6439
    @ooomb6439 2 หลายเดือนก่อน +1

    thankyouu bro you got a sub

  • @ChiragEmpyreal
    @ChiragEmpyreal 8 หลายเดือนก่อน +1

    thanks for this.

  • @scottonanski4173
    @scottonanski4173 6 หลายเดือนก่อน +14

    Okay, great! Now use this in a real-world development example where you have 3 monitor sizes; 1920 x 1080, 3840 x 1600, and 5120 x 2800. Use this on containers, headers, footers, etc. It's not as easy are you making it out to be.

    • @codobyte
      @codobyte หลายเดือนก่อน +1

      And I would like to add pixel-ratio for retina screens!
      If someone can give me a solution how to do that?

    • @iJuce
      @iJuce หลายเดือนก่อน +1

      Note how he didn’t even respond😂 he can’t be bothered

    • @firstlast493
      @firstlast493 27 วันที่ผ่านมา

      Should I use userAgent and dppx?

  • @dileepbatchala1590
    @dileepbatchala1590 ปีที่แล้ว +2

    If it is single line clamp function is ok, but when the text is in multiple lines what about the line height? It should also change accordingly.

  • @markoseovac3185
    @markoseovac3185 ปีที่แล้ว +1

    Interesting new thing, thank you 🤙

  • @AlThePal78
    @AlThePal78 ปีที่แล้ว +1

    it is a very good video one of my favorites

  • @OCEMTechZone
    @OCEMTechZone 9 หลายเดือนก่อน +1

    Great 🎉

  • @magatsu82
    @magatsu82 2 หลายเดือนก่อน

    Try to zoom in or out now.... font will remain the same size, don't use vw alone and px are not a good way to set font sizes, use rem or em

  • @rg-web-design
    @rg-web-design 6 หลายเดือนก่อน

    I wonder if there is a way to create a 'reverse clamp' for vw? On a desktop, I might want the website logo to be 10vw but on mobile I'd want it 20vw. I haven't found any solution as yet.

  • @dileepbatchala1590
    @dileepbatchala1590 ปีที่แล้ว

    Brother what about the line height?

  • @sanjeevd6872
    @sanjeevd6872 ปีที่แล้ว

    Font clamp not working for samsung galaxy mobiles

  • @juanortegaa6916
    @juanortegaa6916 ปีที่แล้ว +2

    Did you take this from Kevin Powell ??

  • @benburakk
    @benburakk ปีที่แล้ว

    which using vs cde theme?

  • @darkman237
    @darkman237 9 หลายเดือนก่อน

    stupid question: this will work for any font?

    • @oliseoseji8868
      @oliseoseji8868 8 หลายเดือนก่อน

      yes and not just font

    • @darkman237
      @darkman237 8 หลายเดือนก่อน +1

      @@oliseoseji8868I wasn't able to get it to work on firefox, latest version.

  • @sanjeevd6872
    @sanjeevd6872 ปีที่แล้ว

    Font clamp size not working different devices pls tell the solution sir .....

  • @seancarlopiodo2685
    @seancarlopiodo2685 ปีที่แล้ว

    Can I use clamp and media query at the same time?

  • @Shahriyor00
    @Shahriyor00 11 วันที่ผ่านมา +1

    speak a little slow

  • @vikashpatel1204
    @vikashpatel1204 ปีที่แล้ว

    Wasting too much of time in video instead ( Get inspired from @Fireship )

  • @Atractiondj
    @Atractiondj หลายเดือนก่อน

    not a single TH-camr shows how such typography works for text at least in 2 lines, everyone takes 2-3 words and says wow look one line...
    In real examples you will have to add another media query to edit the font sizes otherwise they may be smaller than they could be...
    The video is just clickbait! There is no solution for fonts in one line!