Last updated : 2021-04-23

글로벌 세팅방법 (Automatically Responsive!)

How to Setup Oxygen: Best Global Settings (Automatically Responsive!) - YouTube 스타일시트 생성 및 아래 CSS 적용If you do not […]
Written by : doogak

How to Setup Oxygen: Best Global Settings (Automatically Responsive!) - YouTube

스타일시트 생성 및 아래 CSS 적용
If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em)

html {
   font-size: 62.5%;
}

Global Settings > Headings > Font-size를 모두 지울것

Fluid-responsive font-size calculator (websemantics.uk)

상기 Calculator의 세팅을 Units: REM, CSS method: Clamp로 설정하고, Viewport:를 32~128로 설정한 후 원하는 REM Range를 설정하면 됨. 참고로 1REM은 10px임.

/* h1~h6 */
clamp(3.2rem, calc(3.2rem + ((1vw - 0.32rem) * 1.6667)), 4.8rem)
clamp(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.0417)), 3.8rem)
clamp(2.4rem, calc(2.4rem + ((1vw - 0.32rem) * 0.8333)), 3.2rem)
clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 0.625)), 2.6rem)
clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 0.625)), 2.2rem)
clamp(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.4167)), 1.8rem)
/* body text */
clamp(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.2083)), 1.6rem) 

Global Styles / Sections & Columns 에서 Section Container Padding의 Top/Bottom 값을 Clamp를 이용하여 적용, 좌/우 값은 2 rem 정도로 수정함.

clamp(5rem, calc(5rem + ((1vw - 0.32rem) * 5.2083)), 10rem)

Columns Padding의 단위를 none으로 하고, 값을 모두 삭제할 것.

magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram