csswg/css3-values Overview.html,1.134,1.135 Overview.src.html,1.137,1.138

• From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
• Date: Mon, 12 Dec 2011 21:59:02 +0000
• To: public-css-commits@w3.org
• Message-Id: <E1RaDtm-0006c4-Ir@lionel-hutz.w3.org>

Update of /sources/public/csswg/css3-values
In directory hutz:/tmp/cvs-serv25398

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Add font-size example to calc()

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-values/Overview.html,v
retrieving revision 1.134
retrieving revision 1.135
diff -u -d -r1.134 -r1.135
--- Overview.html	12 Dec 2011 21:52:45 -0000	1.134
+++ Overview.html	12 Dec 2011 21:59:00 -0000	1.135
@@ -1258,6 +1258,22 @@
 }</pre>
   </div>
 
+  <div class=example>
+   <p>The following sets the &lsquo;<code
+    class=property>font-size</code>&rsquo; so that exactly 40em fits within
+    the viewport, ensuring that roughly the same amount of text always fills
+    the screen no matter the screen size.</p>
+
+   <pre>
+:root {
+	font-size: calc(100vw / 40);
+}</pre>
+
+   <p>If the rest of the design is specified using the &lsquo;<a
+    href="#rem-unit"><code class=css>rem</code></a>&rsquo; unit, the entire
+    layout will scale to match the viewport width.</p>
+  </div>
+
   <p class=issue>Add less trivial examples, particularly involving parens or
    nesting.
 

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-values/Overview.src.html,v
retrieving revision 1.137
retrieving revision 1.138
diff -u -d -r1.137 -r1.138
--- Overview.src.html	12 Dec 2011 21:52:46 -0000	1.137
+++ Overview.src.html	12 Dec 2011 21:59:00 -0000	1.138
@@ -851,6 +851,17 @@
 }</pre>
 	</div>
 
+	<div class="example">
+		<p>The following sets the 'font-size' so that exactly 40em fits within the viewport, ensuring that roughly the same amount of text always fills the screen no matter the screen size.</p>
+
+		<pre>
+:root {
+	font-size: calc(100vw / 40);
+}</pre>
+
+		<p>If the rest of the design is specified using the ''rem'' unit, the entire layout will scale to match the viewport width.</p>
+	</div>
+
 	<p class='issue'>Add less trivial examples, particularly involving parens
 	or nesting.</p>
 

Received on Monday, 12 December 2011 22:01:08 UTC