Question

我在Ruby On Rails中运行了大量应用程序。现在我想将字体减少到某些像素。我不可能在整个应用程序中找到使用了font-size的地方。

有没有办法立即修复整个应用程序，如果字体是

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
    if(message.pressEnter){
        chrome.tabs.query({active: true}, function(tabs) {
            chrome.debugger.attach({ tabId: tabs[0].id }, "1.0");
            chrome.debugger.sendCommand({ tabId: tabs[0].id }, 'Input.dispatchKeyEvent', { type: 'keyUp', windowsVirtualKeyCode:13, nativeVirtualKeyCode : 13, macCharCode: 13  });
            chrome.debugger.sendCommand({ tabId: tabs[0].id }, 'Input.dispatchKeyEvent', { type: 'keyDown', windowsVirtualKeyCode:13, nativeVirtualKeyCode : 13, macCharCode: 13  });
            chrome.debugger.detach({ tabId: tabs[0].id });
        });
    }
});

并且使用CSS或jquery，我可能会立即减少字体大小，这将成为

font-size: 23px
font-size: 10px

如果我将整个应用程序减少到3个像素...假设所有字体大小都在不同的文件中。但是我们可以在rails

中按

font-size: 20px
font-size: 7px

或application.css命中每个文件

Answer 1

您可以使用em或rem（root em）之类的内容。所以你的代码就像：

body {font-size: 10pt;}

p {font-size: 1.2em;}
h1 {font-size: 1.5em;}

请注意基于em的值。您可以使用正文值来按比例增加或减少font-size。

body.inc50percent {font-size: 1.5em;}

工作代码段

＆＃13;

$(function () {
  $("a").click(function () {
    $("body").removeClass("inc25percent inc50percent inc75percent").addClass($(this).data("class"));
    return false;
  });
});

＆＃13;

body {font-size: 10pt;}

p {font-size: 1.2em;}
h1 {font-size: 1.5em;}

body.inc25percent {font-size: 1.25em;}
body.inc50percent {font-size: 1.5em;}
body.inc75percent {font-size: 1.75em;}

.action,
.action p,
.action a {font-size: 10pt; line-height: 1em; margin: 0 0 5px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="action">
  <p>Choose the font size. Whatever you choose, these remain the same.</p>
  <a href="#" data-class="nothing">Reset</a>
  <a href="#" data-class="inc25percent">Increase 25%</a>
  <a href="#" data-class="inc50percent">Increase 50%</a>
  <a href="#" data-class="inc75percent">Increase 75%</a>
</div>

<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum voluptatum magnam a dolore, nesciunt nemo modi, quaerat aliquid delectus fugit optio sit, officia ab quidem eum consequatur quam expedita. Nemo.</p>
<p>Nemo aut, iure amet laboriosam eaque atque non quam. Ab nihil voluptatem suscipit dicta mollitia eaque dolor saepe error qui, voluptas consequatur odit voluptatum deleniti porro sequi, libero, sunt reiciendis.</p>
<p>Nemo omnis possimus animi at magnam consequuntur neque? Ad similique possimus nobis id rem, sapiente neque aliquam iure, nisi nemo at excepturi asperiores facilis recusandae aperiam nostrum itaque consequatur. Eum.</p>
<p>Voluptates dolorem quia nemo fugit aperiam labore fuga. At quo ex numquam facere? Dolores facere quisquam perferendis aut voluptatibus, asperiores ducimus provident obcaecati ea ipsam. Sequi quisquam perferendis animi labore.</p>
<p>Ut, adipisci est vel nulla totam quas voluptate, officia maxime, cumque, cum rerum delectus pariatur. Aut exercitationem, eum illum nobis molestias natus esse libero placeat eligendi hic, inventore nisi maxime.</p>

＆＃13;

更新：添加了不变的常量字体大小的元素。

整个应用程序中的font-size

1 个答案: