ขนาดตัวอักษรที่ตอบสนองใน CSS

ฉันสร้างเว็บไซต์โดยใช้ตารางZurb Foundation 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 Typography ส่วนหัวปรับให้เข้ากับเบราว์เซอร์เนื่องจากมีการบีบอัดและขยาย

ฉันขาดอะไรบางอย่างที่ชัดเจนจริง ๆ ? ฉันจะบรรลุสิ่งนี้ได้อย่างไร

font-sizeจะไม่ตอบสนองเช่นนี้เมื่อการปรับขนาดหน้าต่างเบราว์เซอร์ แต่พวกเขาตอบสนองต่อการตั้งค่าซูม / ขนาดของเบราว์เซอร์เช่นหากคุณกดCtrlและ+ร่วมกันบนแป้นพิมพ์ในขณะที่อยู่ในเบราว์เซอร์

คำค้นหาสื่อ

คุณจะต้องดูที่การใช้เคียวรีสื่อเพื่อลดขนาดตัวอักษรในบางช่วงเวลาที่มันเริ่มทำลายการออกแบบและการสร้างแถบเลื่อน

ตัวอย่างเช่นลองเพิ่มสิ่งนี้ลงใน CSS ที่ด้านล่างเปลี่ยนความกว้าง 320 พิกเซลไม่ว่าที่ใดก็ตามที่การออกแบบของคุณเริ่มแตกหัก:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

ความยาวเปอร์เซ็นต์ของวิวพอร์ต

นอกจากนี้คุณยังสามารถใช้ความยาวร้อยละวิวพอร์ตเช่นvw, vh, และvmin vmaxเอกสาร W3C อย่างเป็นทางการสำหรับรัฐนี้:

ความยาวร้อยละ viewport มีความสัมพันธ์กับขนาดของบล็อกเริ่มต้นที่มี เมื่อความสูงหรือความกว้างของบล็อกเริ่มต้นที่มีการเปลี่ยนแปลงพวกเขาจะถูกปรับตาม

อีกครั้งจากเอกสาร 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 ยังมีปัญหากับหน่วย vh ซึ่งได้รับการแก้ไขใน iOS 8

คุณสามารถใช้ค่าวิวพอร์ตแทน ems, pxs หรือ pts:

1vw = 1% ของความกว้างวิวพอร์ต

1vh = 1% ของความสูงวิวพอร์ต

1vmin = 1vw หรือ 1vh แล้วแต่จำนวนใดจะน้อยกว่า

1vmax = 1vw หรือ 1vh แล้วแต่จำนวนใดจะใหญ่กว่า

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

จาก CSS-Tricks: วิชาการพิมพ์ขนาด Viewport

ฉันเล่นกับวิธีที่จะเอาชนะปัญหานี้และเชื่อว่าฉันได้พบวิธีแก้ไข:

หากคุณสามารถเขียนแอปพลิเคชันของคุณสำหรับ Internet Explorer 9 (และใหม่กว่า) และเบราว์เซอร์ที่ทันสมัยอื่น ๆ ทั้งหมดที่รองรับ CSS calc (), หน่วย rem และหน่วย vmin คุณสามารถใช้สิ่งนี้เพื่อให้ได้ข้อความที่ปรับขนาดได้โดยไม่มีการสืบค้นสื่อ:

body {
  font-size: calc(0.75em + 1vmin);
}

ที่นี่มีการใช้งานจริง: http://codepen.io/csuwldcat/pen/qOqVNO

ใช้ตัวmediaระบุCSS (นั่นคือสิ่งที่พวกเขาใช้ [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:

1. “ Ems” (em) :“ em” เป็นหน่วยที่ปรับขนาดได้ em เท่ากับขนาดฟอนต์ปัจจุบันตัวอย่างเช่นถ้าขนาดตัวอักษรของเอกสารคือ 12 pt, 1 em เท่ากับ 12 pt Ems สามารถปรับขนาดได้ในธรรมชาติดังนั้น 2 em จะเท่ากับ 24 pt, .5 em จะเท่ากับ 6 pt ฯลฯ
2. เปอร์เซ็นต์ (%) : หน่วยเปอร์เซ็นต์นั้นเหมือนกับหน่วย“ em” มากพอสำหรับความแตกต่างพื้นฐาน ก่อนอื่นขนาดฟอนต์ปัจจุบันเท่ากับ 100% (เช่น 12 pt = 100%) ในขณะที่ใช้หน่วยเปอร์เซ็นต์ข้อความของคุณยังคงสามารถปรับขนาดได้อย่างสมบูรณ์สำหรับอุปกรณ์มือถือและการเข้าถึง

ดูkyleschaeffer.com / ....

CSS 3รองรับมิติใหม่ที่สัมพันธ์กับพอร์ตมุมมอง แต่วิธีนี้ใช้ไม่ได้กับ Android:

1. 3.2vw = 3.2% ของความกว้างของวิวพอร์ต
2. 3.2vh = 3.2% ของความสูงของวิวพอร์ต
3. 3.2vmin = ขนาดเล็กกว่า 3.2vw หรือ 3.2vh

4. 3.2vmax = ใหญ่กว่า 3.2vw หรือ 3.2vh

   body
   {
       font-size: 3.2vw;
   }
   

ดูCSS-Tricks ...และดูที่ฉันสามารถใช้ ...

มีอีกวิธีในการปรับขนาดแบบอักษรที่ตอบสนอง - การใช้หน่วยความจำ

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 และ Internet Explorer 8 คุณจะต้องเพิ่มทางเลือกด้วยหน่วย px:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

หากคุณกำลังพัฒนาด้วยLessคุณสามารถสร้างมิกซ์อินที่จะทำคณิตศาสตร์ให้คุณ

หน่วยสนับสนุน Rem - http://caniuse.com/#feat=rem

วิธีแก้ปัญหา "vw" มีปัญหาเมื่อไปที่หน้าจอขนาดเล็กมาก คุณสามารถตั้งค่าขนาดฐานและขึ้นจากที่นั่นด้วย Calc ():

font-size: calc(16px + 0.4vw);

ส่วนนี้นำมาใช้ในมูลนิธิ 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;

สำหรับ Medium up พวกมันจะสร้างขนาดตามตัวแปรชุดแรก:

@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 ที่คุณกำหนดเองเพื่อกำหนดขนาดตัวอักษรสำหรับขนาดหน้าจอที่เกี่ยวข้อง

ขนาดตัวอักษรที่ตอบสนองสามารถทำได้ด้วยรหัส JavaScript นี้ชื่อFlowType :

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType - เว็บที่ตอบสนองต่อการพิมพ์ที่ดีที่สุด: ขนาดตัวอักษรตามความกว้างขององค์ประกอบ

หรือรหัส JavaScript นี้ชื่อFitText :

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText - ทำให้ขนาดตัวอักษรมีความยืดหยุ่น ใช้ปลั๊กอินนี้ในการออกแบบที่ตอบสนองของคุณสำหรับการปรับขนาดสัดส่วนตามหัวข้อของคุณ

หากคุณใช้เครื่องมือสร้างให้ลอง Rucksack

มิฉะนั้นคุณสามารถใช้ตัวแปร CSS (คุณสมบัติที่กำหนดเอง) เพื่อควบคุมขนาดแบบอักษรขั้นต่ำและสูงสุดอย่างง่ายดาย ( สาธิต ):

* {
  /* 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);
}

ผมเห็นบทความดีดีจากCSS-เคล็ดลับ มันใช้งานได้ดี:

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)));
}

ฉันเพิ่งคิดไอเดียที่คุณจะต้องกำหนดขนาดตัวอักษรหนึ่งครั้งต่อองค์ประกอบ แต่ก็ยังได้รับอิทธิพลจากการสืบค้นสื่อ

ก่อนอื่นฉันตั้งค่าตัวแปร "--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>

ในตัวอย่างของฉันฉันใช้เฉพาะการวางแนวของวิวพอร์ต แต่หลักการควรเป็นไปได้กับการสืบค้นสื่อใด ๆ

"FitText" ของ jQuery น่าจะเป็นวิธีแก้ปัญหาส่วนหัวที่ตอบสนองได้ดีที่สุด ตรวจสอบที่ GitHub: https://github.com/davatron5000/FitText.js

เช่นเดียวกับเฟรมเวิร์กมากมายเมื่อคุณ "ปิดตาราง" และแทนที่ CSS เริ่มต้นของเฟรมเวิร์กสิ่งต่าง ๆ จะเริ่มแตกทางซ้ายและขวา กรอบการทำงานมีความแข็งแกร่งโดยเนื้อแท้ หากคุณต้องการใช้สไตล์เริ่มต้นของ Zurb พร้อมกับคลาสกริดตามค่าเริ่มต้นหน้าเว็บควรแสดงอย่างเหมาะสมบนมือถือ (เช่นตอบสนอง)

อย่างไรก็ตามดูเหมือนว่าคุณต้องการส่วนหัวขนาดใหญ่ 6.2em ซึ่งหมายความว่าข้อความจะต้องลดขนาดลงเพื่อให้พอดีกับจอแสดงผลมือถือในโหมดแนวตั้ง ทางออกที่ดีที่สุดของคุณคือการใช้ jQuery ข้อความตอบสนองปลั๊กอินเช่นFlowTypeและFitText หากคุณต้องการบางสิ่งบางอย่างที่มีน้ำหนักเบาคุณสามารถตรวจสอบปลั๊กอิน jQuery ข้อความที่ปรับขนาดได้ของฉัน:

http://thdoan.github.io/scalable-text/

ตัวอย่างการใช้งาน:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

ในที่เกิดขึ้นจริงเดิมSass (ไม่ SCSS) คุณสามารถใช้ด้านล่าง mixins font-sizeการตั้งค่าโดยอัตโนมัติวรรคและหัวทั้งหมด

ฉันชอบเพราะมันกะทัดรัดกว่ามาก และพิมพ์ได้เร็วขึ้น นอกจากนั้นมันมีฟังก์ชั่นเดียวกัน อย่างไรก็ตามหากคุณยังต้องการติดกับไวยากรณ์ใหม่ - scss คุณสามารถแปลงเนื้อหา Sass ของฉันเป็น scss ได้ที่นี่: [แปลง SASS เป็น SCSS ที่นี่]

ด้านล่างฉันให้สี่มิกซ์ 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

หลังจากเสร็จสิ้นการเล่นกับการตั้งค่าเพียงโทรหนึ่ง mixin - ซึ่งเป็น: + การตั้งค่าและเรียกใช้ตัวอักษรกำเนิด () ดูรหัสด้านล่างและความคิดเห็นสำหรับข้อมูลเพิ่มเติม

ฉันเดาว่าคุณสามารถทำได้โดยอัตโนมัติสำหรับการสืบค้นสื่อเช่นเดียวกับที่ทำกับแท็กส่วนหัว แต่เราทุกคนใช้การสืบค้นสื่อที่แตกต่างกันดังนั้นจึงไม่เหมาะสำหรับทุกคน ฉันใช้วิธีการออกแบบครั้งแรกผ่านมือถือ รู้สึกอิสระที่จะคัดลอกและใช้รหัสนี้

คัดลอกและวางผสมเหล่านี้ไปยังไฟล์ของคุณ:

=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

กำหนดค่าการผสมทั้งหมดตามความต้องการของคุณ - เล่นกับมัน! :) และจากนั้นโทรหาคุณที่ด้านบนของรหัสการใช้งานจริงด้วย:

+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;

}

ฉันใช้คลาส 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);
}

 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; }

มีวิธีต่อไปนี้ซึ่งคุณสามารถทำสิ่งนี้ได้:

1. ใช้ rem สำหรับเช่น 2.3 rem
2. ใช้ em สำหรับเช่น 2.3em
3. ใช้% สำหรับเช่น 2.3% นอกจากนี้คุณสามารถใช้: vh, vw, vmax และ vmin

หน่วยเหล่านี้จะเปลี่ยนขนาดอัตโนมัติขึ้นอยู่กับความกว้างและความสูงของหน้าจอ

คุณสามารถทำให้ขนาดฟอนต์ตอบสนองหากกำหนดไว้ใน vw (ความกว้างวิวพอร์ต) อย่างไรก็ตามเบราว์เซอร์บางตัวอาจไม่รองรับ วิธีแก้ไขคือใช้จาวาสคริปต์เพื่อเปลี่ยนขนาดตัวอักษรพื้นฐานขึ้นอยู่กับความกว้างของเบราว์เซอร์และกำหนดขนาดตัวอักษรทั้งหมดเป็น%

นี่คือบทความที่อธิบายถึงวิธีการทำให้แบบอักษรตอบสนอง: 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>

ในโค้ดด้านบนรายการของคลาสอื่นจะถูกกำหนดขนาดแบบอักษรในหน่วยทางกายภาพตราบใดที่เบราว์เซอร์ / ระบบปฏิบัติการได้รับการกำหนดค่าอย่างถูกต้องสำหรับ PPI ของหน้าจอ

แบบอักษรหน่วยทางกายภาพมักไม่ใหญ่เกินไปและไม่เล็กเกินไปตราบใดที่ระยะห่างจากหน้าจอเป็นปกติ (ระยะอ่านหนังสือ)

ขนาดข้อความสามารถตั้งค่าด้วยvwหน่วยซึ่งหมายถึง "ความกว้าง viewport" วิธีนี้ขนาดตัวอักษรจะเป็นไปตามขนาดของหน้าต่างเบราว์เซอร์:

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;
    }
}

ใช้สมการนี้:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

สำหรับสิ่งที่ใหญ่กว่าหรือเล็กกว่า 1440 และ 768 คุณสามารถกำหนดเป็นค่าคงที่หรือใช้วิธีการเดียวกัน

ข้อเสียเปรียบกับวิธีแก้ปัญหา vw คือคุณไม่สามารถตั้งอัตราส่วนอัตราส่วนได้กล่าวว่า 5vw ที่ความละเอียดหน้าจอ 1440 อาจกลายเป็นขนาดตัวอักษร 60px ขนาดตัวอักษรความคิดของคุณ แต่เมื่อคุณลดความกว้างของหน้าต่างลงเหลือ 768 อาจสิ้นสุดลง เป็น 12px ไม่ใช่ขั้นต่ำที่คุณต้องการ

ด้วยวิธีการนี้คุณสามารถตั้งค่าขอบเขตบนและขอบเขตล่างของคุณและแบบอักษรจะปรับขนาดตัวเองในระหว่าง

เราสามารถใช้ calc () จาก css

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

สูตรทางคณิตศาสตร์คือคำนวณ (minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth))

Codepen

ฉันเกรงว่าจะไม่มีวิธีแก้ปัญหาที่ง่ายใด ๆ เกี่ยวกับการปรับขนาดแบบอักษร คุณสามารถเปลี่ยนขนาดตัวอักษรโดยใช้แบบสอบถามสื่อ แต่ในทางเทคนิคแล้วมันจะไม่ปรับขนาดได้อย่างราบรื่น ตัวอย่างเช่นถ้าคุณใช้:

@media only screen and (max-width: 320px){font-size: 3em;}

คุณfont-sizeจะเป็น 3em ทั้งสำหรับความกว้าง 300 พิกเซลและ 200 พิกเซล แต่คุณต้องการที่ต่ำกว่าfont-sizeความกว้างที่ 200px เพื่อให้ตอบสนองได้อย่างสมบูรณ์แบบ

ดังนั้นทางออกที่แท้จริงคืออะไร? มีทางเดียวเท่านั้น คุณต้องสร้างภาพ PNG (ที่มีพื้นหลังโปร่งใส) ที่มีข้อความของคุณ หลังจากนั้นคุณสามารถทำให้รูปภาพของคุณตอบสนองได้ง่าย (ตัวอย่างเช่น: width: 35%; height: 28px) ด้วยวิธีนี้ข้อความของคุณจะตอบสนองอย่างเต็มที่กับอุปกรณ์ทั้งหมด

หลังจากได้ข้อสรุปหลายอย่างฉันลงเอยด้วยชุดค่าผสมนี้:

@media only screen and (max-width: 730px) {

    h2 {
        font-size: 4.3vw;
    }
}

ลองนี้

html { font-size: min(max(16px, 4vw), 22px); }

รับมาจากhttps://css-tricks.com/simplified-fluid-typography/

นี่คือสิ่งที่เหมาะกับฉัน ฉันทดสอบบน iPhone เท่านั้น

ไม่ว่าคุณจะมีh1, h2หรือpแท็กใส่ประมาณนี้ข้อความของคุณ:

<h1><font size="5">The Text you want to make responsive</font></h1>

สิ่งนี้แสดงข้อความ 22 พอยต์บนเดสก์ท็อปและยังสามารถอ่านได้บน iPhone

<font size="5"></font>