Fluid Size
visual angle. (with SASS)
Get away from the effects of devices' distance, size, and resolution!!
Advantages
- Easy
- Provides the
fit sizefor each device - Resized
fluidlybetween each device - Compatible with include-media
How to Use?
Install
## Yarn
yarn add fluid-size
## NPM
npm install fluid-size
## Github Repository
npm install @black7375/fluid-sizeImport
@import '~fluid-size/fluid-size';Usage
Just use the name of the API with @include!!
tag {
@include property($size);
}Example
You can use the regular CSS as it is.
There are no restrictions. [Ver 1.5.0 will patch for %, num]
// Only Single Value
body {
@include font-size(16px); // Countable Value => Calculated
@include text-indent(inherit); // Uncalculated Value => Passed
}
// List Value
body {
@include font-size(16px !important); // with Uncountable Value
@include text-indent(5em hanging each-line); // with Multiple Uncountable Values
@include margin(-3px 1% 0 auto); // with Mixed Value
}Converted Sample
// Code
body {
@include font-size(16px);
}
/** Tentative Result
* INFO
* Basis Angle: min angle device(Tablet)
*
* SIZES
* Default: 16px;
* Phone: about 18.75px;
* Tablet: about 16px;
* Laptop: about 16.73px;
* Desktop: about 17.56px;
* High-Desktop: about 20.82px;
*/
// Result
body { // Default
font-size: 1rem;
}
@media (min-width: 480px) { // Phone ~ Tablet
body {
font-size: calc(-0.9504790795vw + 1.4567984055rem);
}
}
@media (min-width: 768px) { // Tablet ~ Laptop
body {
font-size: calc(0.1404102228vw + 0.9331715404rem);
}
}
@media (min-width: 1280px) { // Laptop ~ Desktop
body {
font-size: calc(0.1306874648vw + 0.9409497468rem);
}
}
@media (min-width: 1920px) { // Desktop ~ High-Desktop, Keep going.
body {
font-size: calc(0.5082290299vw + 0.4878998687rem);
}
}Options
Options consist of global and scoped options.
-
Global Option: Setting it as a
variablechanges the default value of the whole. -
Scoped Option: It is provided as an argument(
maptype) to the function, and when used, applies only to the current value.
// Global Option
$option1: value1;
$option2: value2;
// Scoped Option
tag {
@include property($size, $max-size);
// or
@include property($size, (option1: value1, option2: value2));
}You can customize resizing method, result's unit, min or max size, ..etc.
Converted Sample
// Code
body {
@include font-size(16px !important, (unit: px, max: 25px));
}
// Result
body { // Default
font-size: 16px !important;
}
@media (min-width: 480px) { // Phone ~ Tablet
body {
font-size: calc(-0.95048vw + 23.30877px) !important;
}
}
@media (min-width: 768px) { // Tablet ~ Laptop
body {
font-size: calc(0.14041vw + 14.93074px) !important;
}
}
@media (min-width: 1280px) { // Laptop ~ Desktop
body {
font-size: calc(0.13069vw + 15.0552px) !important;
}
}
@media (min-width: 1920px) { // Desktop ~ High-Desktop, Keep going.
body {
font-size: calc(0.50823vw + 7.8064px) !important;
}
}
@media (min-width: 3383px) { // Reach maximum size
body {
font-size: 25px !important;
}
}Learn More
Wiki:The theory of font size and readability
Principle
Use visual angles to determine the fit size(I called) for each device.
source: Legibility: how to make text convenient to read
Calculation process
- Size specification
- Measure the
angleto be viewed on the reference device - Generate a
fit sizefor each device based on theangle - Provides real-time resizing(fluidity) for mid-range devices
Browser Supports
F&A
- CSS decimal place: Are the decimal places in a CSS width respected?
