整個應用程序中的字體大小

Question

我在Ruby On Rails中運行着巨大的應用程序。現在我想將字體減少到一些像素。 我無法在整個應用程序中發現使用了字體大小的地方。

有沒有辦法立即解決整個應用程序的問題，如果字體是

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

並使用CSS或jquery，我可能會立即減小字體大小，這將成為

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

如果我將其減少到整個應用程序的3像素..假設所有字體大小都在不同的文件中。 但是因為我們可以在rails中通過application.css或application.js擊中每個文件

Answer 1

您可以使用em或rem （root em ）之類的東西。 因此，您的代碼將類似於：

body {font-size: 10pt;}

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

注意基於em的值。 您可以只使用body的值按比例增加或減小font-size 。

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

工作片段

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

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

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

更新：添加了不變的恆定字體大小的元素。