正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

📌 Forget breakpoints! Use CSS clamp to size your text based on the viewport width. Sandbox + details below 👇

andrej

62,686 subscribers

211,122 次观看 • 3 年前 •via X (Twitter)

艺术科学技术教育

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉

Devon Govett

48,276 次观看 • 5 个月前

One line of CSS. Perfectly responsive typography on every screen. font-size: clamp(1rem, 1vw, 1.75rem); 🪄 1rem minimum keeps text readable on phones 🪄 1vw makes it scale fluidly with the viewport 🪄 1.75rem caps it elegantly on large displays No media queries or breakpoints. Try it!

One line of CSS. Perfectly responsive typography on every screen. font-size: clamp(1rem, 1vw, 1.75rem); 🪄 1rem minimum keeps text readable on phones 🪄 1vw makes it scale fluidly with the viewport 🪄 1.75rem caps it elegantly on large displays No media queries or breakpoints. Try it!

Kyrylo Silin

193,045 次观看 • 4 个月前

Introducing Customizable Responsive Breakpoints for Divi 5. 🥳 Divi 5 now comes with seven pre-defined breakpoints that cover every type of device, and you can customize the width of each breakpoint to control your design at every size. 👇

Introducing Customizable Responsive Breakpoints for Divi 5. 🥳 Divi 5 now comes with seven pre-defined breakpoints that cover every type of device, and you can customize the width of each breakpoint to control your design at every size. 👇

Elegant Themes

3,655,486 次观看 • 1 年前

How i build with Claude👇 1. CSS blend-mode = text over photography in one line 2. GSAP ScrollTrigger = hero pins while content scrolls over it 3. Splitting.js = title arrives letter by letter on load 4. video autoplay muted = forest feels alive without user interaction 5. CSS clamp() = typography scales mobile to desktop zero media queries 6. linear-gradient overlay = text readable at any screen brightness Save this

How i build with Claude👇 1. CSS blend-mode = text over photography in one line 2. GSAP ScrollTrigger = hero pins while content scrolls over it 3. Splitting.js = title arrives letter by letter on load 4. video autoplay muted = forest feels alive without user interaction 5. CSS clamp() = typography scales mobile to desktop zero media queries 6. linear-gradient overlay = text readable at any screen brightness Save this

FHILY👑

32,000 次观看 • 3 个月前

love the new ebay playbook docs 👏 always good to see fluid typography scaling in the wild details on how you can do it with CSS 👇

love the new ebay playbook docs 👏 always good to see fluid typography scaling in the wild details on how you can do it with CSS 👇

jhey ʕ•ᴥ•ʔ

98,083 次观看 • 1 年前

An awesome CSS trick is to use :hover on the container and :not(:hover) on the items that are not currently hovered to make more advanced effects 👇👨‍💻

An awesome CSS trick is to use :hover on the container and :not(:hover) on the items that are not currently hovered to make more advanced effects 👇👨‍💻

David Mráz

16,879 次观看 • 1 年前

MiniMax H3 Anime Daily Routine Updated the old prompt. You can find the prompt in the replies. Reference character has glasses so I added a few details. Don't forget to update the prompt based on your character.

MiniMax H3 Anime Daily Routine Updated the old prompt. You can find the prompt in the replies. Reference character has glasses so I added a few details. Don't forget to update the prompt based on your character.

Kōda

41,269 次观看 • 1 个月前

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

30,624 次观看 • 3 年前

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗

Ahmad Shadeed

29,912 次观看 • 4 个月前

𝐊𝐚𝐫𝐦𝐚𝐂𝐚𝐫𝐝𝐬 𝐅𝐫𝐞𝐞 𝐌𝐢𝐧𝐭 𝐈𝐬 𝐋𝐈𝐕𝐄! 🔥 💳 4 Tiers. 1️⃣ 1 mint per wallet address. ⏰ 72 Hours. 💵 Your tier will be assigned based on your $KARMA balance at a snapshot taken shortly before the reveal on Monday Alpha. Access. KarmaCards. Mint details below 👇

𝐊𝐚𝐫𝐦𝐚𝐂𝐚𝐫𝐝𝐬 𝐅𝐫𝐞𝐞 𝐌𝐢𝐧𝐭 𝐈𝐬 𝐋𝐈𝐕𝐄! 🔥 💳 4 Tiers. 1️⃣ 1 mint per wallet address. ⏰ 72 Hours. 💵 Your tier will be assigned based on your $KARMA balance at a snapshot taken shortly before the reveal on Monday Alpha. Access. KarmaCards. Mint details below 👇

KARMACOIN ✨

118,336 次观看 • 2 年前

Use geodes falloff on the whole character instead of going purely flat. #camkeys even passes viewport data to the GN so you don’t even need to use a camera.

Use geodes falloff on the whole character instead of going purely flat. #camkeys even passes viewport data to the GN so you don’t even need to use a camera.

Beyond Dev - Tyler Walker

98,876 次观看 • 2 个月前

Read with ease in the HBR mobile app using our new Article Text Size Selector, which gives you control over text size for a more comfortable, personalized reading experience. Go to Profile > Display Settings to adjust your preferred text size. Try it now.

Harvard Business Review

10,470 次观看 • 2 个月前

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! I wrote a new article where I continue exploring the experimental implementations of the latest specs.

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! I wrote a new article where I continue exploring the experimental implementations of the latest specs.

Roma Komarov (inactive)

138,374 次观看 • 3 年前

Introducing Windfall - the 1st "Gaming based LST" built on Solana! Turbocharge your SOL holdings through gamified prize pools. Join the waitlist below👇 (1/6)

Introducing Windfall - the 1st "Gaming based LST" built on Solana! Turbocharge your SOL holdings through gamified prize pools. Join the waitlist below👇 (1/6)

Windfall

166,198 次观看 • 2 年前

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

182,620 次观看 • 3 年前

Jordan 4 “Thunder” Men's Sizes 9-14 ($210) (No 9.5) Post a VIDEO of a shoe YOUR size Somewhere PHYSICALLY in the video have your MENS shoe size and the answer to the question written Show us your size tag or sticker (Example Shown) Post it below 👇

Jordan 4 “Thunder” Men's Sizes 9-14 ($210) (No 9.5) Post a VIDEO of a shoe YOUR size Somewhere PHYSICALLY in the video have your MENS shoe size and the answer to the question written Show us your size tag or sticker (Example Shown) Post it below 👇

better+

49,801 次观看 • 3 年前

Jordan 4 “Red Cement” Men's Sizes 8-14 ($210) Post a VIDEO of a shoe YOUR size Somewhere PHYSICALLY in the video have your MENS shoe size and the ANSWER to the question written Show us your size tag or sticker (Example Shown) Post it below 👇

Jordan 4 “Red Cement” Men's Sizes 8-14 ($210) Post a VIDEO of a shoe YOUR size Somewhere PHYSICALLY in the video have your MENS shoe size and the ANSWER to the question written Show us your size tag or sticker (Example Shown) Post it below 👇

better+

40,348 次观看 • 3 年前