css - How to easily change a font-sizing from px to em for a big, existing site? -

-

how change font-sizing px em big, existing site?

any tips quickly?

it depends on existing stylesheet, it’s not going quick i’m afraid (assuming want site same after you’re done).

potential problems

when text sized in pixels, visual size of text same put in css. example, css p {font-size: 12px;} result in <p> tags having font size of 12 pixels.

however, when text sized in ems, visual size calculated relative font size of nearest ancestor.

so, if had following css:

body {font-size: .625em;}  p {font-size: 1.2em;}  .header {font-size: 1.5em;}

and following html:

<body>  <p>paragraph</p>  <div class="header>     <p>paragraph inside header</p> </div>  </body>

then visual font size of first paragraph 1.2 (paragraph’s size) × .625 (body’s font size) × 16 pixels (the default root font size of modern browsers) = 12 pixels.

but visual size of second paragraph 1.2 (paragraph’s size) × 1.5 (.header’s size) × .625 × 16 pixels = 18 pixels.

if don’t have lot html elements different font sizes nested within each other, you’re fine. you’ll need check in html — difficult tell stylesheet alone, if it’s big site.

approach

in terms of approach, when sizing fonts in ems, it’s easiest if design site doesn’t have many different font sizes. prefer set <body> element commonly-used font size, e.g.

body {     font-size: .75em;/* 12px */ }

then only change when need to, e.g.

h2 {     font-size: 1.5em; /* 16px */ }

otherwise can end sizing , resizing lot when nesting happens. can particularly annoying e.g. <li>s.

of course, approach works if design site doesn’t include lots of different font sizes.

some people set body 0.625em because equals 10px (16 × 0.625 = 10), meaning elements don’t have ancestor set font size, 1em = 10px, 1.1em = 11px , on. personally, think adds more complexity removes, i’ve never done comparison.

either way, find helpful put intended visual font size in comments after each use of font-size, above. way, remember font size element meant if gets re-nested in html.


Comments

Post a Comment

Popular posts from this blog

ASP.NET/SQL find the element ID and update database -

-
basically i've got update query runs when click submit button. i have asp:repeater in page layer inside this <asp:repeater id="dgbookings" runat="server" onitemdatabound="itemdb"> <itemtemplate> <div class="bookingscontent"> <div class="bookingdetails" id="<%# databinder.eval(container.dataitem, "booking_ref") %>"> <p class="infotext"><%# databinder.eval(container.dataitem, "adults") %> <asp:linkbutton onclick="editdetails" text="edit..." runat="server"></asp:linkbutton></p> <p class="infotext"><asp:linkbutton onclick="submitdetails" text="submit..." runat="server"></asp:linkbutton></p> </div> </div> </itemtemplate> <asp:repeater> and outputs ...
Read more

jquery - appear modal windows bottom -

-
i have modal windows in application, work fine <div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> but when modal appears, appear top of windows, , want appear bottom the application joomla 3.0! , using template of meet gavern any idea? i found solution i modified de css in bootstrap .modal.fade { top:-25%; -webkit-transition:opacity .3s linear, bottom .3s ease-out; -moz-transition:opacity .3s linear, bottom .3s ease-out; -ms-transition:opacity .3s linear, bottom .3s ease-out; -o-transition:opacity .3s linear, bottom .3s ease-out; transition:opacity .3s linear, bottom .3s ease-out; }
Read more

c++ - Compiling static TagLib 1.6.3 libraries for Windows -

-
i having super hard time compiling , using taglib 1.6.3 in qt project. i've tried can think of. taglib claims supported through cmake i'm not having luck. furthermore, i'm confused kinds of files need qt libs! i've built *.a files, *.lib, , *.dll. understand far... believe since i'm working in windows *.lib want. no matter do, end "undefined references" taglib functions try use when try compile qt project. have tried mingw32, msys, visual studio 2008, , cross-compiling windows on linux. turning nothing. what makes less sense me if compile same taglib source qt on mac (g++ think?) works fine! somewhere in windows compilation procedures have going wrong. have been smacking face on desk 30 (on , off) hours trying figure out. since qt uses mingw must compile taglib same compiler? if compile *.lib's visual studio not compatible? are *.a libraries usable in windows? (assuming mingw) i'm still trying handle on c++ stuff, after reading coun...
Read more