Увеличить уменьшить размер шрифта текста

• Изменение шрифта в зависимости от размера экрана браузера
• зафиксировать панель

Браузеры позволяют изменять масштаб страницы, нажав на клавиши CTRL + или CTRL -. Для возврата в исходное состояние — CTRL 0 (ноль).

Скрипт "увеличить — уменьшить текст"

Пример,

Здесь я буду делать акцент на Blogger, но данный скрипт, увеличивающий уменьшающий размер шрифта текста на странице, можно с успехом применить и на других ресурсах. Пользователи blogspot переходят в "Шаблон" - кнопка "Изменить HTML" (подробнее про процесс изменения шаблона).

Добавляем скрипт

Перед </body> пишем:

<script>
//<![CDATA[
var tgs=new Array('div','p','td','pre'); // теги, в которых текст будет расти/уменьшаться
var szs=new Array('xx-small','x-small','small','medium','large','x-large','xx-large'); // размер можно писать в процентах new Array('70%','80%','90%','100%','110%','120%','130%')
var startSz=3;
function ts(trgt,inc) {
  cEl=null,sz=startSz;
  sz += inc;
  if (sz < 0) sz=0;
  if (sz > 6) sz=6;
  startSz=sz;
  cEl=document.querySelectorAll(trgt);
  for (var c=0; c < cEl.length; c++) {
    cEl[c].style.fontSize=szs[sz];
    for (i=0 ; i < tgs.length; i++) {
      cTags=cEl[c].getElementsByTagName(tgs[i]);
      for (j=0; j < cTags.length ; j++) cTags[j].style.fontSize=szs[sz];
    }
  }
}
//]]>
</script>

Вставляем элементы, нажав на которые будет изменяться текст

В то место, где мы хотим увидеть кнопки пишем:

<button onclick="ts('.entry-content',-1);">А-</button>
<button onclick="ts('.entry-content',1);">А+</button>

<!-- .entry-content — селектор, в рамках которого будет происходить изменение. Если его заменить на body, то преобразование будет осуществляться по всей странице. -->

В Blogger самым простым вариантом будет создать гаджет HTML/JavaScript, куда внести код кнопок. Или перед <data:post.body/> в шаблоне.

в f t