CSS의 응답 글꼴 크기
저는 주브 파운데이션 3 그리드를 사용하여 사이트를 만들었습니다.각 페이지에는 큰 페이지가 있습니다.h1:
body {
font-size: 100%
}
/* Headers */
h1 {
font-size: 6.2em;
font-weight: 500;
}<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div>
<!-- End Tagline -->
</div>
<!-- End Row -->브라우저 크기를 모바일 크기로 조정하면 큰 글꼴이 조정되지 않고 큰 텍스트에 맞게 가로 스크롤이 브라우저에 포함됩니다.
Zurb Foundation 3 타이포그래피 예제 페이지에서 헤더가 압축되고 확장될 때 브라우저에 적용된다는 것을 알게 되었습니다.
제가 정말로 명백한 것을 놓치고 있는 건가요?어떻게 이를 달성할 수 있습니까?
ems, px 또는 pts 대신 viewport 값을 사용할 수 있습니다.
1vw = 뷰포트 폭의 1%
1vh = 뷰포트 높이의 1%
1vmin = 1vw 또는 1vh 중 작은 쪽
1ppm = 1vw 또는 1vh 중 큰 쪽
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
CSS-Tricks에서:뷰포트 크기 타이포그래피
그font-size브라우저 창의 크기를 조정할 때 이렇게 응답하지 않습니다.대신 브라우저에 있는 동안 키보드에서 를 함께 누르는 경우와 같은 브라우저 확대/축소/유형 크기 설정에 응답합니다.
미디어 쿼리
미디어 쿼리를 사용하여 설계를 중단하고 스크롤 막대를 만들기 시작하는 특정 간격으로 글꼴 크기를 줄여야 합니다.
예를 들어, 디자인이 깨지기 시작할 때마다 320픽셀 너비를 변경하여 하단의 CSS에 추가해 보십시오.
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
뷰포트 백분율 길이
다음과 같은 뷰포트 백분율 길이를 사용할 수도 있습니다.vw,vh,vmin그리고.vmax이에 대한 공식 W3C 문서에는 다음과 같은 내용이 포함되어 있습니다.
뷰포트 백분율 길이는 초기 포함 블록의 크기에 상대적입니다.초기 포함 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다.
다시, 동일한 W3C 문서에서 각 개별 장치를 다음과 같이 정의할 수 있습니다.
vw 단위 - 초기 포함 블록 폭의 1%와 같습니다.
vh 단위 - 초기 격납 블록 높이의 1%와 같습니다.
vmin 단위 - vw 또는 vh 중 작은 것과 같습니다.
vmax 단위 - vw 또는 vh 중 큰 것과 같습니다.
그리고 다른 CSS 값과 정확히 같은 방식으로 사용됩니다.
.text {
font-size: 3vw;
}
.other-text {
font-size: 5vh;
}
여기서 볼 수 있듯이 호환성이 비교적 좋습니다.그러나 Internet Explorer 및 Edge 일부 버전에서는 vmax를 지원하지 않습니다.또한 iOS 6과 7은 iOS 8에서 수정된 vh 유닛에 문제가 있습니다.
h1{
font-size : clamp(2rem, 10vw, 5rem);
}
여기서clamp에는 3개의 인수가 있습니다.
첫 번째는 허용되는 최소 글꼴 크기입니다.
세 번째는 최대 허용 글꼴 크기입니다.
두 번째 인수는 항상 사용하려는 글꼴 크기입니다.해당 단위는 절대 단위가 아닌 상대 단위(vw, vh, ch)여야 합니다(즉, px, mm, pt가 아님). 상대 단위는 화면 크기를 변경할 때 크기를 w.r.t로 변경합니다.
예를 들어, 동적으로 크기를 조정할 큰 글꼴 멋진 아이콘이 있다고 가정합니다(응답 아이콘).
fa-random-icon{
font-size: clamp( 15rem, 80vw, 80vh)
}
- 여기서 80vw는 기본 글꼴 크기입니다.
- 15rem은 최소 글꼴 크기(하한)입니다.
- 80vh는 최대 글꼴 크기(상한)입니다.
예.
특정 모바일 화면 크기에서 80vw < 15rem이면 글꼴 크기는 15rem입니다.
화면이 너무 넓으면 80vw > 80vh이면 글꼴 크기는 80vh입니다.
사람들이 제안한 위의 방법들은 항상 약간의 불확실한 결과를 가지고 있습니다...우리가 사용할 때처럼
vw글꼴 크기가 너무 크거나 작을 수 있습니다(제한됨).
@media할 수 글꼴 .
저는 이 문제를 해결하기 위한 방법들을 가지고 놀았고, 해결책을 찾았다고 믿습니다.
Internet Explorer 9(이상) 및 CSS calc(), rem 단위 및 vmin 단위를 지원하는 다른 모든 최신 브라우저에 대한 응용 프로그램을 작성할 수 있는 경우.이를 통해 미디어 쿼리 없이 확장 가능한 텍스트를 얻을 수 있습니다.
body {
font-size: calc(0.75em + 1vmin);
}
http://codepen.io/csuwldcat/pen/qOqVNO 에서 실행 중입니다.
CSS »media반응형 스타일링을 위한 지정자([zurb] 사용):
@media only screen and (max-width: 767px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
}
jQuery 솔루션을 사용해도 괜찮다면 TextFill 플러그인을 사용해 볼 수 있습니다.
jQuery TextFill은 컨테이너에 맞게 텍스트 크기를 조정하고 글꼴 크기를 최대한 크게 만듭니다.
https://github.com/jquery-textfill/jquery-textfill
이를 달성하기 위한 몇 가지 방법이 있습니다.
미디어 쿼리를 사용하지만 여러 중단점에 대한 글꼴 크기가 필요합니다.
body
{
font-size: 22px;
}
h1
{
font-size: 44px;
}
@media (min-width: 768)
{
body
{
font-size: 17px;
}
h1
{
font-size: 24px;
}
}
% 또는 em의 차원을 사용합니다.기본 글꼴 크기만 변경하면 모든 것이 변경됩니다.이전 것과 달리 매번 본문 글꼴과 h1이 아닌 글꼴만 변경하거나 기본 글꼴 크기를 장치의 기본값으로 하고 나머지를 모두 사용할 수 있습니다.em:
- "Ems"(em):"em"은 확장 가능한 단위입니다.em은 현재 글꼴 크기와 같습니다. 예를 들어, 문서의 글꼴 크기가 12pt이면 1em은 12pt입니다.ems는 본질적으로 확장 가능하기 때문에 2 ems는 24 pt, .5 ems는 6 pt 등과 같습니다.
- 백분율(%):몇 가지 근본적인 차이를 제외하면 백분율 단위는 "em" 단위와 매우 유사합니다.우선 현재 글꼴 크기는 100%(예: 12pt = 100%)입니다.백분율 단위를 사용하는 동안 텍스트는 모바일 장치와 액세스 가능성을 위해 완전히 확장 가능합니다.
kyleschaeffer.com/ 을 참조하십시오.
CSS 3은 뷰 포트와 관련된 새로운 차원을 지원합니다.하지만 Android에서는 작동하지 않습니다.
- 3.2vw = 뷰포트 폭의 3.2%
- 3.2vh = 뷰포트 높이의 3.2%
- 3.2vmin = 3.2vw 또는 3.2vh 중 작은 크기
3.2ppm = 3.2vw 또는 3.2vh 중 더 큰 크기
body { font-size: 3.2vw; }
CSS-Ticks...를 참조하고 사용할 수 있는지도 확인하십시오.
반응하는 글꼴 크기에 대한 또 다른 접근법이 있습니다. - rem 단위를 사용하는 것입니다.
html {
/* Base font size */
font-size: 16px;
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.2rem;
}
나중에 미디어 쿼리에서 기본 글꼴 크기를 변경하여 모든 글꼴 크기를 조정할 수 있습니다.
@media screen and (max-width: 767px) {
html {
/* Reducing base font size will reduce all rem sizes */
font-size: 13px;
}
/* You can reduce font sizes manually as well */
h1 {
font-size: 1.2rem;
}
h2 {
font-size: 1.0rem;
}
}
Internet Explorer 7(인터넷 익스플로러 7)과 Internet Explorer 8(인터넷 익스플로러 8)에서 이 기능을 사용하려면 px 단위로 폴백을 추가해야 합니다.
h1 {
font-size: 18px;
font-size: 1.125rem;
}
Less로 개발 중인 경우 계산을 수행할 수 있는 믹스인을 만들 수 있습니다.
Rem 단위 지원 - http://caniuse.com/ #module=rem
"vw" 솔루션은 매우 작은 화면으로 이동할 때 문제가 발생합니다.기본 크기를 설정하고 calc()를 사용하여 위로 올라갈 수 있습니다.
font-size: calc(16px + 0.4vw);
나는 CSS-Tricks의 훌륭한 기사를 보았습니다.잘 작동합니다.
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
[minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
예:
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
우리는 같은 방정식을 적용할 수 있습니다.line-height속성을 입력하여 브라우저에서도 변경할 수 있습니다.
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
이것은 Foundation 5에서 부분적으로 구현됩니다.
_type.scss 파일에는 두 개의 헤더 변수 집합이 있습니다.
// We use these to control header font sizes
// for medium screens and above
$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;
// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;
중간 크기의 경우 첫 번째 변수 집합을 기준으로 크기를 생성합니다.
@media #{$medium-up} {
h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
h1 { font-size: $h1-font-size; }
h2 { font-size: $h2-font-size; }
h3 { font-size: $h3-font-size; }
h4 { font-size: $h4-font-size; }
h5 { font-size: $h5-font-size; }
h6 { font-size: $h6-font-size; }
}
그리고 기본 화면, 즉 작은 화면의 경우 두 번째 변수 집합을 사용하여 CSS를 생성합니다.
h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }
이러한 변수를 사용하고 사용자 정의 scss 파일에서 재정의하여 각 화면 크기에 대한 글꼴 크기를 설정할 수 있습니다.
응답 글꼴 크기는 FlowType이라는 JavaScript 코드로도 수행할 수 있습니다.
FlowType - 최상의 반응성 웹 타이포그래피: 요소 너비를 기준으로 한 글꼴 크기.
또는 FitText라는 자바스크립트 코드:
텍스트 맞춤 - 글꼴 크기를 유연하게 합니다.헤드라인의 크기를 비율에 따라 조정하려면 응답성이 높은 설계에서 이 플러그인을 사용합니다.
빌드 도구를 사용하는 경우 Rucksack을 사용해 보십시오.
그렇지 않으면 CSS 변수(사용자 지정 속성)를 사용하여 다음과 같이 최소 및 최대 글꼴 크기를 쉽게 제어할 수 있습니다(demo).
* {
/* Calculation */
--diff: calc(var(--max-size) - var(--min-size));
--responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}
h1 {
--max-size: 50;
--min-size: 25;
font-size: var(--responsive);
}
h2 {
--max-size: 40;
--min-size: 20;
font-size: var(--responsive);
}
요소당 글꼴 크기를 한 번만 정의하면 된다는 아이디어가 떠올랐지만 여전히 미디어 쿼리에 영향을 받습니다.
먼저 미디어 쿼리를 사용하는 뷰포트에 따라 변수 "--text-scale-unit"를 "1vh" 또는 "1vw"로 설정합니다.
그런 다음 calc()를 사용하여 변수를 사용하고 글꼴 크기에 대한 승수 번호를 사용합니다.
/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
:root{
--text-scale-unit: 1vh;
}
}
@media (orientation: portrait) {
:root {
--text-scale-unit: 1vw;
}
}
/* Use a variable with calc and multiplication. */
.large {
font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
font-size: calc(var(--text-scale-unit) * 10);
}
.small {
font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
font-size: calc(var(--text-scale-unit) * 2);
}<span class="middle">
Responsive
</span>
<span class="large">
text
</span>
<span class="small">
with one
</span>
<span class="extra-small">
font-size tag.
</span>내 예에서는 뷰포트의 방향만 사용했지만, 이 원칙은 모든 미디어 쿼리에서 가능해야 합니다.
저는 이러한 CSS 클래스를 사용하며, 어떤 화면 크기에서도 제 텍스트를 유동적으로 만듭니다.
.h1-fluid {
font-size: calc(1rem + 3vw);
line-height: calc(1.4rem + 4.8vw);
}
.h2-fluid {
font-size: calc(1rem + 2vw);
line-height: calc(1.4rem + 2.4vw);
}
.h3-fluid {
font-size: calc(1rem + 1vw);
line-height: calc(1.4rem + 1.2vw);
}
.p-fluid {
font-size: calc(1rem + 0.5vw);
line-height: calc(1.4rem + 0.6vw);
}
스타일 시트에 포함해 보십시오.
html {
font-size: min(max(16px, 4vw), 22px);
}
더 많은 정보는 https://css-tricks.com/simplified-fluid-typography/ 에서 확인할 수 있습니다.
이 작업을 수행할 수 있는 방법은 다음과 같습니다.
- 예: 2.3 렘에 렘 사용
- 예: 2.3em에 사용
- 예: 2.3%에 % 사용. 또한 vh, vw, vmax 및 vmin을 사용할 수 있습니다.
이러한 장치는 화면의 너비와 높이에 따라 자동으로 크기가 조정됩니다.
jQuery의 "FitText"는 응답성이 가장 뛰어난 헤더 솔루션일 것입니다.GitHub: https://github.com/davatron5000/FitText.js 에서 확인하십시오.
실제 원본 Sass(scss가 아님)에서는 아래 믹스인을 사용하여 문단과 모든 제목을 자동으로 설정할 수 있습니다.'font-size.
저는 그것이 훨씬 더 콤팩트해서 좋습니다.더 빠르게 입력할 수 있습니다.그 외에는 동일한 기능을 제공합니다.어쨌든, 만약 당신이 여전히 새로운 구문 - scss를 고수하고 싶다면, 내 Sass 콘텐츠를 여기에서 scss로 자유롭게 변환하십시오: [SASS를 여기로 변환]
아래에 4개의 Sass 믹스인을 보여줍니다.필요에 따라 설정을 조정해야 합니다.
=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones
설정 재생을 마친 후 한 믹스인 +config-and-run-font-generator()로 전화를 걸면 됩니다.자세한 내용은 아래 코드 및 설명을 참조하십시오.
헤더 태그에 대해 수행되는 것처럼 미디어 쿼리에 대해 자동으로 수행할 수 있지만, 우리 모두는 서로 다른 미디어 쿼리를 사용하기 때문에 모든 사람에게 적합하지는 않습니다.저는 모바일 우선 설계 방식을 사용하기 때문에 이렇게 할 수 있습니다.이 코드를 자유롭게 복사하여 사용하십시오.
다음 혼합물을 복사하여 파일에 붙여넣습니다.
=font-h1p-style-generator-manual()
body
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
font-size: 100%
line-height: 1.3em
%headers
line-height: 1em
font-weight: 700
p
line-height: 1.3em
font-weight: 300
@for $i from 1 through 6
h#{$i}
@extend %headers
=media-query-base-font-size-change-generator-manual()
body
font-size: 1.2em
@media screen and (min-width: 680px)
body
font-size: 1.4em
@media screen and (min-width: 1224px)
body
font-size: 1.6em
@media screen and (min-width: 1400px)
body
font-size: 1.8em
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
$h1-fs: $h1-fs // Set first header element to this size
$h1-step-down: $h1-step-down // Decrement each time by 0.3
$p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
$h1-fs: $h1-fs + $h1-step-down // Looping correction
@for $i from 1 through 6
h#{$i}
font-size: $h1-fs - ($h1-step-down * $i)
@if $i == $p-same-as-hx
p
font-size: $h1-fs - ($h1-step-down * $i)
// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
+font-h1p-style-generator-manual() // Just a place holder for our font style
+media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
+h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here
필요에 따라 모든 믹스인을 구성하고 게임을 즐기십시오! :) 그리고 실제 SAS 코드의 맨 위에 다음과 같이 표시합니다.
+config-and-run-font-generator()
이렇게 하면 이 출력이 생성됩니다.매개 변수를 사용자 지정하여 다른 결과 집합을 생성할 수 있습니다.그러나 모두 다른 미디어 쿼리를 사용하기 때문에 일부 믹스인은 수동으로 편집해야 합니다(스타일 및 미디어).
생성된 CSS:
body {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.3em;
word-wrap: break-word; }
h1, h2, h3, h4, h5, h6 {
line-height: 1em;
font-weight: 700; }
p {
line-height: 1.3em;
font-weight: 300; }
body {
font-size: 1.2em; }
@media screen and (min-width: 680px) {
body {
font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
body {
font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
body {
font-size: 1.8em; } }
h1 {
font-size: 2em; }
h2 {
font-size: 1.8em; }
h3 {
font-size: 1.6em; }
h4 {
font-size: 1.4em; }
h5 {
font-size: 1.2em; }
p {
font-size: 1.2em; }
h6 {
font-size: 1em;
}
텍스트 크기는 다음과 같이 설정할 수 있습니다.vw단위, 즉 "뷰포트 너비"를 의미합니다.이렇게 하면 텍스트 크기가 브라우저 창의 크기를 따릅니다.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text
개인 프로젝트를 위해 vw와 @meida를 사용했습니다.완벽하게 작동합니다.
.mText {
font-size: 6vw;
}
@media only screen and (max-width: 1024px) {
.mText {
font-size: 10vw;
}
}
.sText {
font-size: 4vw;
}
@media only screen and (max-width: 1024px) {
.sText {
font-size: 7vw;
}
}
우리는 css의 calc()를 사용할 수 있습니다.
p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}
수식은 calc(minsize + (max size - minsize) *(100vm - minviewportwidth) /(max width view oport - minview portwidth))입니다.
답변은 많지만 미디어 쿼리와 결합된 마이너 맥스 기능을 언급하는 사람을 보지 못했습니다.
CSS에는 max() 함수가 있으므로 위의 예제는 하나의 선형이 됩니다.
font-size: max(30vw, 30px);
또는 최소값과 최대값을 사용하여 두 배로 늘립니다.
font-size: min(max(16px, 4vw), 22px);
다음과 동일:
font-size: clamp(16px, 4vw, 22px);
그런 다음 미디어 질의에 이 내용을 입력하고 원하는 방법으로 h1,h2,h3,h4,h5,h6에 적용하는 것을 잊지 마십시오.
@media (max-width: 600px) {
h1 {
font-size: clamp(16px, 4vw, 22px);
}
}
많은 프레임워크와 마찬가지로, 일단 "그리드에서 벗어나" 프레임워크의 기본 CSS를 재정의하면, 모든 것이 왼쪽과 오른쪽으로 부서지기 시작할 것입니다.프레임워크는 본질적으로 경직되어 있습니다.Zurb의 기본 H1 스타일을 기본 그리드 클래스와 함께 사용하려면 웹 페이지가 모바일에서 올바르게 표시되어야 합니다(즉, 응답).
그러나 매우 큰 6.2em 제목이 필요한 것 같습니다. 즉, 세로 모드에서 모바일 디스플레이에 들어가려면 텍스트를 축소해야 합니다.가장 좋은 방법은 FlowType 및 FitText와 같은 응답 텍스트 jQuery 플러그인을 사용하는 것입니다.가벼운 것을 원한다면 Scalable Text jQuery 플러그인을 확인할 수 있습니다.
http://thdoan.github.io/scalable-text/
샘플 사용량:
<script>
$(document).ready(function() {
$('.row .twelve h1').scaleText();
}
</script>
h1 { font-size: 2.25em; }
h2 { font-size: 1.875em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.125em; }
h5 { font-size: 0.875em; }
h6 { font-size: 0.75em; }
글꼴 크기를 vw(뷰포트 너비)로 정의할 경우 응답하도록 설정할 수 있습니다.그러나 모든 브라우저가 지원하는 것은 아닙니다.해결책은 JavaScript를 사용하여 브라우저 너비에 따라 기본 글꼴 크기를 변경하고 모든 글꼴 크기를 %로 설정하는 것입니다.
다음은 응답 글꼴 크기를 만드는 방법을 설명하는 기사입니다. http://wpsalt.com/responsive-font-size-in-wordpress-theme/
저는 이 솔루션을 찾았고, 이 솔루션은 저에게 매우 효과적입니다.
/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
데스크톱과 모바일/태블릿 모두에서 텍스트가 잘 보이도록 하는 문제를 해결하는 한 가지 방법은 텍스트 크기를 화면 PPI(인치당 포인트 수)에 의존하지 않는 물리적 단위(예: 센티미터 또는 인치)로 고정하는 것입니다.
이 답변을 바탕으로 HTML 문서의 끝에서 응답 글꼴 크기에 사용하는 코드는 다음과 같습니다.
<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
var devicePixelRatio = window.devicePixelRatio || 1;
dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;
function setFontSizeForClass(className, fontSize) {
var elms = document.getElementsByClassName(className);
for(var i=0; i<elms.length; i++) {
elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
}
}
setFontSizeForClass('h1-font-size', 30);
setFontSizeForClass('action-font-size', 20);
setFontSizeForClass('guideline-font-size', 25);
// etc for your different classes
</script>
위의 코드에서 브라우저/OS가 화면의 PPI에 대해 올바르게 구성되어 있는 한 다른 클래스의 항목은 실제 단위로 글꼴 크기가 할당됩니다.
화면까지의 거리가 일반적인 경우(책 읽기 거리) 물리적 장치 글꼴은 항상 너무 크거나 작지 않습니다.
다음 방정식을 사용합니다.
calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));
1440 및 768보다 크거나 작은 경우 정적 값을 지정하거나 동일한 방법을 적용할 수 있습니다.
vw 솔루션의 단점은 화면 해상도 1440에서 5vw가 사용자의 아이디어 글꼴 크기인 60px 글꼴 크기가 될 수 있지만 창 너비를 768로 줄이면 원하는 최소 크기가 아닌 12px가 될 수 있다는 것입니다.
이 방법을 사용하면 상한과 하한을 설정할 수 있습니다. 그러면 글꼴이 그 사이에서 자동으로 축척됩니다.
많은 결론을 내린 후에 저는 다음과 같은 조합으로 결론을 내렸습니다.
@media only screen and (max-width: 730px) {
h2 {
font-size: 4.3vw;
}
}
이 사이즈를 입어보세요.root당신의 html에서.그것은 휴대폰에서 TV와 대형 스크린에 이르기까지 거의 모든 기기에서 작동합니다.매우 극단적인 경우 미디어 쿼리를 사용할 수 있습니다.
:root{
font-size: max(14px, 1.1vmax);
}
vmax장치 높이가 장치 너비보다 크거나 그 반대인 경우를 처리합니다.14px베이스 대신에16px작은 장치에 대해서는,14px장치 너비를 초과할 수 있는 16인치 이상의 공간을 제공하며, 여전히 읽을 수 있고 멀지 않습니다.16px.
당신의 페이지의 나머지 css를 위해, 사용해 보세요.rem루트 베이스에 대한 상대 값font-size절대 단위를 사용하는 대신, 예를 들어.px.
어쨌든, 당신은 사이의 base px에 대해 좋은 결과를 얻을 것입니다.12px까지16px및 뷰포트 기반 크기 사이1vmax까지1.25vmax 사해볼수있다니습도를 해 볼 .vmin또는vh또는vw기호에 따라
언급URL : https://stackoverflow.com/questions/15649244/responsive-font-size-in-css
'programing' 카테고리의 다른 글
| PowerShell에서 HTTP GET을 사용하려면 어떻게 해야 합니까? (0) | 2023.08.06 |
|---|---|
| 코틀린에서 지연 후 함수를 어떻게 호출합니까? (0) | 2023.08.01 |
| 폴더에 있는 모든 파일의 파일 이름에서 특정 문자 바꾸기 또는 삭제 (0) | 2023.08.01 |
| SQL Server에서 동일한 두 열을 비교하려면 어떻게 해야 합니까? (0) | 2023.08.01 |
| E: 패키지 npm을 찾을 수 없습니다. (0) | 2023.08.01 |