css - يمكن - ماذا يحدث عندما تنسى اغلاق علامه em




تحجيم الخط على أساس عرض الحاوية (18)

أواجه صعوبة في الحصول على رأسي حول تحجيم الخط.

لدي حاليًا هذا الموقع font-size أساسي يصل font-size 100٪. 100 ٪ من على الرغم من؟ يبدو أن هذا يُحسب في 16 بكسل.

لقد كنت أقل انطباعًا بأن 100٪ سيشيرون إلى حجم نافذة المتصفح ، ولكن ليس لأن 16 بكسل دائمًا ما إذا تم تغيير حجم النافذة وصولًا إلى عرض الجوال أو سطح المكتب ذي الشاشة العريضة.

كيف يمكنني جعل النص على مقياس موقعي فيما يتعلق بحاوياته؟ حاولت استخدام em ولكن هذا لا مقياس سواء.

السبب في ذلك هو أن أشياء مثل القائمة الخاصة بي تصبح مضغوطة عندما تقوم بتغيير حجمها ، لذلك أحتاج إلى تقليل font-size px لـ .menuItem من بين عناصر أخرى تتعلق بعرض الحاوية. (على سبيل المثال ، في القائمة على سطح مكتب كبير ، يعمل 22 بكسل بشكل مثالي. انتقل لأسفل إلى عرض الجهاز اللوحي و 16 بكسل هو الأنسب.)

أنا على دراية بإمكاني إضافة نقاط توقف ، ولكني أريد حقًا أن يكون حجم النص جيدًا لأن هناك نقاط توقف إضافية ، وإلا سأنتهي المطاف بمئات نقاط التوقف مقابل كل خفض بمقدار 100 بكسل للتحكم في النص.


حل Pure-CSS مع calc() ، وحدات CSS والرياضيات

هذا على وجه التحديد ليس ما يسأل OP ، ولكن قد يجعل يوم شخص ما. هذه الإجابة ليست سهلة الاستخدام ، فهي بحاجة إلى بعض الأبحاث في نهاية المطور.

جئت أخيرا للحصول على حل خالص CSS لهذا باستخدام calc() مع وحدات مختلفة. سوف تحتاج إلى بعض الفهم الرياضي الأساسي للصيغ calc() التعبير الخاص بك عن calc() .

عندما انتهيت من ذلك ، كان علي أن أحصل على رأس متجاوب لعرض الصفحة الكاملة مع بعض الحشو القليل من الآباء في DOM. سأستخدم قيمي هنا ، واستبدلها بقيمك الخاصة.

إلى الرياضيات

سوف تحتاج:

  • نسبة معدلة بشكل جيد في بعض viewport ، استخدمت 320px ، وبالتالي حصلت على 24px عالية و 224px واسعة حتى نسبة 9.333 ... أو 28/3
  • عرض الحاوية ، كان لي padding: 3em والعرض الكامل لذلك حصلت على 100wv - 2 * 3em

X هو عرض الحاوية بحيث يمكنك استبدالها بالتعبير الخاص بك أو ضبط القيمة للحصول على نص صفحة كاملة. R هي النسبة التي ستحصل عليها. يمكنك الحصول عليه عن طريق ضبط القيم في بعض منفذ العرض ، وفحص عرض العنصر وارتفاعه واستبدالها بقيمك الخاصة. أيضا ، هو width / heigth ؛)

x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3

y = x / r
  = (100vw - 6em) / (28 / 3)
  = (100vw - 6em) * 3 / 28
  = (300vw - 18em) / 28
  = (75vw - 4.5rem) / 7

و فرقعة انها عملت! كتبت

font-size: calc((75vw - 4.5rem) / 7)

إلى رأسي وتعديله بشكل رائع في كل إطار عرض.

ولكن كيف يعمل؟

نحن بحاجة إلى بعض الثوابت هنا. يعني 100vw العرض الكامل لإطار العرض ، وكان هدفي هو إنشاء رأسية كاملة العرض مع بعض الحشو.

النسبة. حصل لي الحصول على العرض والارتفاع في إطار العرض واحد لي نسبة للعب ، وبنسبة أعرف ما ينبغي أن يكون الارتفاع في عرض إطار العرض الآخر. حسابها باليد سوف يستغرق الكثير من الوقت وعلى الأقل أخذ الكثير من عرض النطاق الترددي لذا فهي ليست إجابة جيدة.

استنتاج

أتساءل لماذا لم يفهم أحد ذلك ، حتى أن بعض الناس يقولون أن هذا سيكون مستحيلاً بالنسبة لـ CSS. لا أحب استخدام جافا سكريبت في تعديل العناصر ، لذلك لا أقبل JS أو حتى إجابات jQuery بدون حفر المزيد. الكل في الكل ، من الجيد أن هذا قد برز ، وهذه خطوة واحدة لتطبيقات CSS الخالصة في تصميم موقع الويب.

أعتذر عن أي اتفاقية غير اعتيادية في النص ، فأنا لست متحدثًا باللغة الإنجليزية ، كما أنني جديد تمامًا في كتابة إجابات SO.

تحرير : يجب أن يلاحظ أيضا أن لدينا أشرطة التمرير الشريرة في بعض المتصفحات. على سبيل المثال ، عند استخدام Firefox ، لاحظت أن 100vw تعني العرض الكامل لإطار العرض ، وتمتد تحت شريط التمرير (حيث لا يمكن توسيع المحتوى!) ، لذلك يجب أن يكون نص fullwidth مهملاً بعناية ويفضل أن يتم اختباره مع العديد من المتصفحات والأجهزة.


ولكن ماذا لو لم تكن الحاوية عبارة عن إطار العرض (الجسم)؟

يتم طرح هذا السؤال في تعليق Alex تحت الإجابة المقبولة.

هذه الحقيقة لا تعني أن vw لا يمكن استخدامها إلى حد ما في الحجم لتلك الحاوية. الآن لرؤية أي اختلاف في كل واحد يجب أن نفترض أن الحاوية بطريقة ما تتسم بالمرونة في الحجم. سواء من خلال width النسبة المئوية المباشرة أو من خلال كونها أقل من الهوامش بنسبة 100٪. تصبح النقطة "moot" في حالة تعيين الحاوية دائمًا ، على سبيل المثال ، عرض 200px - ثم تعيين font-size يعمل لهذا العرض.

مثال 1

مع حاوية عرض مرنة ، ومع ذلك ، يجب أن ندرك أنه بطريقة ما لا يزال حجم الحاويات خارج منفذ العرض . على هذا النحو ، فإن الأمر يتعلق بتعديل إعداد vw استنادًا إلى فارق حجم النسبة المئوية لمنفذ العرض ، مما يعني مراعاة تغيير حجم الأغلفة الأم. خذ هذا المثال :

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = view port width, as 1vw = 1/100th of that
       So if the container is 50% of view port (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 2.5vw; 
}

بافتراض أن div هو طفل body ، فهو 50% من عرض 100% ، وهو حجم إطار العرض في هذه الحالة الأساسية. بشكل أساسي ، تريد تعيين vw الذي سيبدو جيدًا لك. كما ترون في تعليقي في css أعلاه ، يمكنك "التفكير" من خلال ذلك رياضيًا فيما يتعلق بحجم إطار العرض الكامل ، لكنك لست بحاجة إلى القيام بذلك. سينتقل النص إلى "flex" مع الحاوية ، نظرًا لأن الحاوية يتم تثبيتها مع تغيير حجم إطار العرض. استكمال: وهنا مثال على حاويتين بحجم مختلف .

مثال 2

يمكنك المساعدة في ضمان تغيير حجم إطار العرض عن طريق فرض الحساب بناءً على ذلك. خذ بعين الاعتبار هذا المثال :

html {width: 100%;} /* force html to be viewport width */
body {width: 150%; } /* overflow the body */

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = view port width, as 1vw = 1/100th of that
       Here, the body is 200% of viewport, but the container is 50% 
       of view port, so both parents factor  into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 3.75vw 
       (5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw; 
}

لا يزال المقياس قائمًا على إطار العرض ، ولكن يتم إعداده في الأساس استنادًا إلى حجم الحاوية نفسه.

يجب تغيير حجم الحاوية بشكل حيوي ...

إذا انتهى تغيير حجم عنصر الحاوية إلى تغيير ديناميكيًا في نسبته المئوية إما عبر نقاط @media أو عبر javascript ، فعندئذٍ سيحتاج أي "هدف" أساسي إلى إعادة الحساب للحفاظ على نفس "العلاقة" لتحجيم النص.

خذ مثال رقم 1 أعلاه. إذا تم تحويل div إلى عرض 25% إما عن طريق @media أو javascript ، ففي نفس الوقت ، سيحتاج font-size إلى ضبط إما في استعلام الوسائط أو بواسطة javascript إلى الحساب الجديد لـ 5vw * .25 = 1.25 . وهذا من شأنه أن يضع حجم النص بنفس الحجم لو كان "عرض" الحاوية الأصلية 50% قد انخفض إلى النصف من تحجيم إطار العرض ، ولكن تم تخفيضه الآن بسبب تغيير في حساب النسبة المئوية الخاصة به.

تحدي

مع استخدام الدالة calc() قيد الاستخدام ، يصبح من الصعب ضبطها ديناميكيًا ، نظرًا لأن هذه الدالة لا تعمل لأغراض font-size في هذا الوقت. لذلك لا يمكنك إجراء ضبط CSS3 خالص إذا كان عرضك يتغير على calc() . وبالطبع ، قد لا يكون التعديل الطفيف في عرض الهوامش كافياً لضمان أي تغيير في font-size ، لذلك قد لا يهم.


إلقاء نظرة على رمز بلدي يجعل font size smaller fit أي شيء هناك

لكنني أعتقد أن هذا لا يؤدي إلى تجربة مستخدم جيدة

var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;

items.each(function(){
    //display value depend sometimes on your case you may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width
    $(this).css({"whiteSpace":"nowrap","display":"inline-block"});
    while ($(this).width() > containerWidth){
         console.log("$(this).width()"+ $(this).width() + "containerWidth" + containerWidth)
         $(this).css("font-size", fontSize -= 0.5);
    }
});

آمل أن يساعدك هذا


احتفظ دائمًا بعنصرك بهذه السمة:

Javascript: element.style.fontSize = "100%";

أو

CSS: style = "font-size: 100%;"

عند الانتقال إلى وضع ملء الشاشة ، يجب أن يكون لديك بالفعل متغير مقياس محسوب (مقياس> 1 أو مقياس = 1). ثم ، في وضع ملء الشاشة:

document.body.style.fontSize = (scale * 100) + "%";

يعمل بشكل جيد مع رمز صغير.


الحل باستخدام SVG:

<div style="width: 60px;">  
  <svg width="100%" height="100%" viewBox="0 -200 1000 300"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text font-size="300" fill="black">Text</text>
  </svg>
</div>

https://jsfiddle.net/qc8ht5eb/


باستخدام vw ، em & co. يعمل بالتأكيد ، ولكن ايمو يحتاج دائما لمسة الإنسان لضبط.

هذا هو السيناريو الذي كتبته للتو استنادًا إلى answer @ tnt-rox التي تحاول تأليف لمسة الإنسان تلك:

$('#controller').click(function(){
	$('h2').each(function(){
    var
      $el = $(this),
      max = $el.get(0),
      el = null
    ;
    max =
      max
    ? max.offsetWidth
    : 320
    ;
    $el.css({
      'font-size': '1em',
      'display': 'inline',
    });
    el = $el.get(0);

    el.get_float = function(){
      var
        fs = 0
      ;
      if (this.style && this.style.fontSize) {
        fs = parseFloat(this.style.fontSize.replace( /([\d\.]+)em/g, '$1' ));
      }
      return fs;
    };

    el.bigger = function(){
      this.style.fontSize = (this.get_float() +0.1) +'em';
    };


    while ( el.offsetWidth < max ) {
      el.bigger();
    }
    // finishing touch.
    $el.css({
      'font-size': ((el.get_float() -0.1) +'em'),
      'line-height': 'normal',
      'display': '',
    });
	});  // end of ( each )
});	// end of ( font scaling test )
div {
  width: 50%;
  background-color: tomato;
  font-family: 'Arial';
}

h2 {
  white-space: nowrap;
}

h2:nth-child(2) {
  font-style: italic;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="controller" value="Apply" />
<div>
  <h2>Lorem ipsum dolor</h2>
  <h2>Test String</h2>
  <h2>Sweet Concatenation</h2>
  <h2>Font Scaling</h2>
</div>

يقلل بشكل أساسي حجم الخط إلى 1em ثم يبدأ زيادة بمقدار 0.1 حتى يصل إلى أقصى عرض.

jsFiddle


بصفتك احتياطي جافا سكريبت (أو الحل الوحيد الخاص بك) ، يمكنك استخدام ملحق jQuery Scalem الخاص بي ، والذي يتيح لك القياس بالنسبة إلى العنصر الرئيسي (حاوية) عن طريق تمرير خيار reference .


تم التحديث لأنني حصلت على تصويت لأسفل.

هنا هي الوظيفة:

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};

ثم قم بتحويل كافة أحجام خط عنصر المستند إلى em الخاصة بك أو٪.

ثم أضف شيئًا كهذا إلى شفرتك لتعيين حجم الخط الأساسي.

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/


داخل CSS ، حاول إضافة هذا في أسفل تغيير العرض 320 بكسل أينما يبدأ تصميمك في التكسير:

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

       body { font-size: 1em; }

    }

ثم أعط حجم الخط في "px" أو "em" كما يحلو لك.


في حال كان ذلك مفيدًا لأي شخص ، كانت معظم الحلول في هذا الموضوع عبارة عن التفاف النص إلى عدة أسطر ، شكل e.

ولكن بعد ذلك وجدت هذا ، وعملت:

https://github.com/chunksnbits/jquery-quickfit

استخدام المثال:

$('.someText').quickfit({max:50,tolerance:.4})


كانت مشكلتي متشابهة ولكنها تتعلق بنص القياس داخل العنوان. لقد جربت Fit Font لكنني احتجت إلى تبديل الضاغط للحصول على أي نتائج ، حيث إنه كان يحل مشكلة مختلفة قليلاً ، كما كان Text Flow. لذلك ، كتبت عن المكوِّن الإضافي الصغير الذي يقلل حجم الخط ليتناسب مع الحاوية ، على افتراض أن لديك overflow: hidden white-space: nowrap حتى إذا كان تقليل الخط إلى الحد الأدنى لا يسمح بعرض العنوان بالكامل ، يقطع ما يمكن أن تظهر.

(function($) {

  // Reduces the size of text in the element to fit the parent.
  $.fn.reduceTextSize = function(options) {
    options = $.extend({
      minFontSize: 10
    }, options);

    function checkWidth(em) {
      var $em = $(em);
      var oldPosition = $em.css('position');
      $em.css('position', 'absolute');
      var width = $em.width();
      $em.css('position', oldPosition);
      return width;
    }

    return this.each(function(){
      var $this = $(this);
      var $parent = $this.parent();
      var prevFontSize;
      while (checkWidth($this) > $parent.width()) {
        var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
        // Stop looping if min font size reached, or font size did not change last iteration.
        if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
            prevFontSize && prevFontSize == currentFontSize) {
          break;
        }
        prevFontSize = currentFontSize;
        $this.css('font-size', (currentFontSize - 1) + 'px');
      }
    });

  };

})(jQuery);

لقد أعددت وظيفة مقياس بسيطة باستخدام تحويل css بدلاً من حجم الخط. يمكنك استخدامه داخل أي حاوية ، ليس لديك لضبط استعلامات الوسائط وغيرها :)

مقالة المدونة: https://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/

الرمز:

function scaleHeader() {
  var scalable = document.querySelectorAll('.scale--js');
  var margin = 10;
  for (var i = 0; i < scalable.length; i++) {
    var scalableContainer = scalable[i].parentNode;
    scalable[i].style.transform = 'scale(1)';
    var scalableContainerWidth = scalableContainer.offsetWidth - margin;
    var scalableWidth = scalable[i].offsetWidth;
    scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
    scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
  }
}

عرض العمل: https://codepen.io/maciejkorsan/pen/BWLryj


ما تبحث عنه هو أطوال نسبة منفذ العرض :

تكون أطوال نسبة إطار العرض بالنسبة إلى حجم الكتلة التي تحتوي عليها أولية . عندما يتم تغيير ارتفاع أو عرض الكتلة الأولية المحتوية ، يتم تحجيمها وفقًا لذلك. ومع ذلك ، عندما تكون قيمة تجاوز السعة على عنصر الجذر هي تلقائي ، يفترض عدم وجود أي أشرطة تمرير.

القيم هي:

  • vw (٪ من عرض إطار العرض)
  • vh (٪ of the viewport height)
  • vi (1٪ من حجم إطار العرض في اتجاه المحور المضمن للعنصر الجذر)
  • vb (1٪ من حجم إطار العرض في اتجاه محور كتلة العنصر الجذر)
  • vmin (أصغر vw أو vh )
  • vmax (أكبر أو vw أو vh )

1 v * يساوي 1٪ من الكتلة الأولية المحتوية.

يبدو مثل هذا:

p {
    font-size: 4vw;
}

كما ترى ، عندما يزيد عرض إطار العرض ، يتزايد حجم الخط أيضًا ، دون الحاجة إلى استخدام استعلامات الوسائط.

هذه القيم هي وحدة قياس ، تمامًا مثل px أو em ، بحيث يمكن استخدامها لحجم عناصر أخرى أيضًا ، مثل العرض أو الهامش أو الحشو.

دعم المتصفح جيد جدًا ، ولكنك ستحتاج على الأرجح إلى احتياطي ، مثل:

p {
    font-size: 16px; 
    font-size: 4vw;
}

تحقق من إحصائيات الدعم: http://caniuse.com/#feat=viewport-units .

تحقق أيضًا من CSS-Tricks للحصول على مظهر أوسع: css-tricks.com/viewport-sized-typography

في ما يلي مقالة جيدة حول إعداد أحجام min / max وممارسة المزيد من التحكم في الأحجام: http://madebymike.com.au/writing/precise-control-responsive-typography/

وإليك مقالة حول تعيين الحجم باستخدام calc () بحيث يملأ النص إطار العرض: http://codepen.io/CrocoDillon/pen/fBJxu

أيضا ، يرجى الاطلاع على هذه المقالة ، التي تستخدم تقنية يطلق عليها اسم "المصهور الرائد" لضبط ارتفاع الخط أيضًا. https://css-tricks.com/molten-leading-css/


من أجل جعل حجم الخط مناسبًا resizeFont() ، بدلاً من النافذة ، راجع وظيفة resizeFont() قمت بمشاركتها في هذا السؤال (مجموعة من الإجابات الأخرى ، ومعظمها مرتبط بالفعل هنا). يتم تشغيله باستخدام window.addEventListener('resize', resizeFont); .

Vanilla JS: Resize font-awesome to fit container

JS:

function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}

ربما يمكنك استخدام vw / vh كملف احتياطي ، لذلك يمكنك تعيين وحدات em أو rem باستخدام javascript بشكل ديناميكي ، مما يضمن أن الخطوط لا تتدرج إلى النافذة إذا تم تعطيل javascript.

قم .resize class .resize على كل العناصر التي تحتوي على نص ترغب في تغيير حجمه.

تشغيل الوظيفة قبل إضافة نافذة تغيير حجم مستمع الحدث. بعد ذلك ، سيتم تصغير أي نص لا يتناسب مع الحاوية الخاصة به عند تحميل الصفحة ، وكذلك عندما يتم تغيير حجمها.

NOTE: The default font-size must be set to either em , rem or % to achieve proper results... and if the styling of your elements is too complex then the browser might crash if you start frantically resizing the window.




يقوم مكون الويب هذا بتغيير حجم الخط بحيث يطابق عرض النص الداخلي عرض الحاوية. تحقق من demo .

يمكنك استخدامه على النحو التالي:

<full-width-text>Lorem Ipsum</full-width-text>

هناك طريقة للقيام بذلك دون javascript!

يمكنك استخدام svg مضمنة. يمكنك استخدام css على svg إذا كانت مضمنة. عليك أن تتذكر أن استخدام هذا الأسلوب يعني أن svg ستستجيب لحجم حاويتها.

جرب استخدام الحل التالي ...

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
      <text>SAVE $500</text>

  </svg>

</div>

CSS

div {
  width: 50%; /* set your container width */
  height: 50%; /* Set your container height */

}

svg {
  width: 100%;
  height: auto;

}

text {
  transform: translate(40px, 202px);
  font-size: 62px;
  fill: #000;

}

مثال: https://jsfiddle.net/k8L4xLLa/32/

تريد شيئا أكثر مبهرج؟

يسمح لك SVGs أيضًا بالقيام بالأشياء الرائعة مع الأشكال والخردة. تحقق من حالة الاستخدام الرائعة هذه لنص قابل للترقية ...

https://jsfiddle.net/k8L4xLLa/14/





font-size