Web World

Responsive Font Size The text size can be set with a   vw   unit, which means the "viewport width". That way the text size will follow the size of the browser window: Example < h1  style ="font-size:8vw;" > Hello World < /h1 > < p  style ="font-size:2vw;" > Resize the browser window to see how the font size scales. < /p > Change Font Size With Media Queries You could also use media queries to change the font size of an element on specific screen sizes: @media screen and (min-width: 601px)  {   div.example  {     font-size :  80px ;    } } @media screen and (max-width: 600px)  {   div.example  {     font-size :  30px ;    } }

@media print : You can you  @media print    to define what will be printed and what will be shown on screen. Background color showing in print: The Chrome CSS property  -webkit-print-color-adjust: exact;  works appropriately. However, making sure you have the correct CSS for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print CSS from your screen CSS. This is done via the  @media print  and  @media screen . Often times just setting up some extra  @media print  CSS is not enough because you still have all your other CSS included when printing as well. In these cases you just need to be aware of CSS specificity as the print rules don't automatically win against non-print CSS rules. In your case, the  -webkit-print-color-adjust: exact  is working. However, your  background-color  and color definitions are being beaten out by other...

@page : The  @page  CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with  @page . You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored. @page { margin : 1 cm ; } @page : first { margin : 2 cm ; } :blank :first :left :right @page { size : portrait } @page rotated { size : landscape } Controlling Widows and Orphans The  orphans   property specifies the minimum number of lines of a paragraph that must be left at the bottom of a page. The   widows   property specifies the minimum number of lines of a paragraph that must be left at the top of a page. <style type = "text/css" > @page{orphans:4; widows:2;} </style>

If you're willing to switch over to tables for your layout (not necessarily ideal), you can do it with the  <thead>  and  <tfoot>  elements. They'll print at the top and bottom of every page: <div id = "header" > header </div> <div id = "content" > content spanning several pages... </div> <div id = "footer" > Footer - Fixed at the bottom of each page </div> <table> <thead> <!-- Will print at the top of every page --> </thead> <tbody> <!-- Page content --> </tbody> <tfoot> <!-- Will print at the bottom of every page --> </tfoot> </table> Another option is to use display  table-header-group  and  table-footer-group  but cross-browser support isn't great: # header { display : table-header-group ; } # main { display : table-row-group ; } # footer { display : ta...