当前位置：网站首页>Yyds dry inventory consistent and smooth zoom type and spacing

Yyds dry inventory consistent and smooth zoom type and spacing

2022-06-30 01:49:00 【liuhao951866】

When Chris The first time you sent me this tip , I am thinking about writing an article on progressive enhancement , But the subject is so broad that same thing And it's too easy to predict , Especially for those who are already familiar with my writing . That being the case , What I want to outline in this article is not just one thing , But the day when I met the writing prompt would be the day when the pig began to fly . However , This set of things will change the way you write CSS The way .

Personally, I think this group of things has caused many websites to crash —— Especially in terms of responsive design . This group of things is Layout and spacing . I often see inconsistent spacing —— Especially the vertical spacing —— This makes it difficult to scan the content and produce this subtle 、 A sense of disjunction . So is the type ： On the small viewport Headline , Or the title hierarchy without size comparison visually , Make them visually useless .

All these problems can be easily solved by using the size scale and fluid type , I guarantee it will make your website look and feel better . Let's get started .

What the hell is a size rule ？

Size scale is a unified development of size based on scale - Or to be more precise , It's a ratio .

stay type-scale.com In the screenshot of , I chose one “ Perfect fourth ” The proportion , It has been used. 1.333 Of ratio . This means that each increase in size , Multiply the current dimension by 1.333, Reduce the size each time , Divide 1.333.

If your basic font size is 16px, Use this scale , The next size is 16 * 1.333, namely 21.33px. The next dimension is 21.33 * 1.333, namely 28.43px. When you move the scale up and down , This provides a lovely curve .

CSS`clamp()` And type liquidity

these years , If you say ,“ well , Andy , Your favorite CSS What is the function ？” I will immediately say flexbox, But I don't , Not now . I am a clamp() Super fan . I wrote it in more detail here , But summary clamp() It does some clever things according to the three parameters you give it ：

minimum value
Ideal value
Maximum

This is a very useful tool for smooth typesetting and spacing , Because you can write CSS：

       
       .my-element {
       
       font-size: 
       
       clamp(
       
       1rem, 
       
       calc(
       
       1rem * 
       
       3vw), 
       
       2rem);
       
}
      
1.
2.
3.

This point CSS Gives us a full, responsive text size based on viewport width , And with convenient lock , To make sure the size doesn't get too big or too small .

Zoom in and out with clamp , Test whether the text is clear important . It should be significantly larger or smaller . Because we are rem A unit is used in fluid calculation , So we are very helpful .

Put them together

Yes , So we have set the size scale and CSS——clamp() How they fit together ？ utopia The wise man behind came up with The simplest but most convenient way . I use Their type of tools and Spacing tool Create a size scale for the size viewport . then , Use clamp(), I generated a fully flowing major dimension scale , And a notice Gorko Configured Sass Map .

      
      
       
       $gorko-size-scale: (
       
       
  '300': clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem),
       
       
  '400': clamp(0.88rem, 0.83rem + 0.24vw, 1rem),
       
       
  '500': clamp(1.09rem, 1rem + 0.47vw, 1.33rem),
       
       
  '600': clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem),
       
       
  '700': clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem),
       
       
  '800': clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem),
       
       
  '900': clamp(2.67rem, 2.07rem + 3vw, 4.21rem),
       
       
  '1000': clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem)
       
       
);
      
      
      
      
       
       1.
       
       2.
       
       3.
       
       4.
       
       5.
       
       6.
       
       7.
       
       8.
       
       9.
       
       10.

This clip is from my website piccalil.li, So typesetting is very easy to use .

You can also translate it into good ol' CSS Custom properties ：

       
       :
       
       root {
       
       --size-300: 
       
       clamp(
       
       0.7rem, 
       
       0.66rem + 
       
       0.2vw, 
       
       0.8rem);
       
       --size-400: 
       
       clamp(
       
       0.88rem, 
       
       0.83rem + 
       
       0.24vw, 
       
       1rem);
       
       --size-500: 
       
       clamp(
       
       1.09rem, 
       
       1rem + 
       
       0.47vw, 
       
       1.33rem);
       
       --size-600: 
       
       clamp(
       
       1.37rem, 
       
       1.21rem + 
       
       0.8vw, 
       
       1.78rem);
       
       --size-700: 
       
       clamp(
       
       1.71rem, 
       
       1.45rem + 
       
       1.29vw, 
       
       2.37rem);
       
       --size-800: 
       
       clamp(
       
       2.14rem, 
       
       1.74rem + 
       
       1.99vw, 
       
       3.16rem);
       
       --size-900: 
       
       clamp(
       
       2.67rem, 
       
       2.07rem + 
       
       3vw, 
       
       4.21rem);
       
       --size-1000: 
       
       clamp(
       
       3.34rem, 
       
       2.45rem + 
       
       4.43vw, 
       
       5.61rem);
       
};
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

This approach also applies to larger sites . With the new web.dev Design or this Beautiful software agent website For example . The latter has a huge scale for large viewports , For smaller viewports, it has smaller 、 A more reasonable scale , All of these are perfectly applied without media queries .

I just want to Make things simple . This approach combines a classic design practice —— A size ratio —— And a modern CSS characteristic clamp()—— send CSS Make it easier , Realization A lot .

原网站

版权声明
本文为[liuhao951866]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202160733425347.html