文件名称:fluid-system:流体系统是用于生成流体样式的样式道具功能转换器。 :sweat_droplets:
文件大小:104KB
文件格式:ZIP
更新时间:2024-05-22 02:51:24
styled-components typography fluid emotion system-ui
:droplet: 流体系统 流体系统是用于生成流体样式的样式道具功能转换器。 它旨在与基于如或库以及CSS-in-JS库(如或。 什么是流体设计? :fountain: 流畅的设计是对响应式设计的React,而响应式设计是对固定布局的React。 现在,网站比以往任何时候都更加需要使他们的设计适应当今市场上存在的众多设备。 为此,大多数网站可能会遵循如下所示的字号规范: 电话 药片 桌面 屏幕宽度 ≥320px ≥768像素 ≥1024px 字体大小 16像素 19像素 23像素 使用响应式设计实现此目标的方法是在每个转换点创建一个断点。 但是,这种方法会使您的大多数用户与屏幕尺寸与这些最佳位置不完全一致的用户疏远了。 以视口宽度为767px的设备为例。 通过响应式设计方法,当它距768px断点仅1个像素时,它应该变得更接近19px,字体大小为16px。 流畅的设计旨在通过根据用户屏幕的宽度在这些定
【文件预览】:
fluid-system-master
----.eslintrc.json(303B)
----.gitignore(34B)
----package.json(1KB)
----src()
--------preflightChecks.js(2KB)
--------index.js(6KB)
--------utils.js(653B)
----.travis.yml(98B)
----LICENSE(1KB)
----CHANGELOG.md(2KB)
----README.md(7KB)
----babel.config.js(84B)
----.npmignore(69B)
----test()
--------index.test.js(9KB)
----yarn.lock(249KB)