Difference between revisions of "Responsive"

From Level Access Web Labs
Jump to navigation Jump to search
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
This page demonstrates how the page width changes when a page is zoomed on desktop sites.  This shows how responsive breakpoints are triggered on the desktop by browser zoom.
 +
 
<html>
 
<html>
 
<head>
 
<head>
Line 12: Line 14:
 
}
 
}
 
#c1 {
 
#c1 {
  position: absolute;
+
  position: relative;
 
  left:80px;
 
  left:80px;
  float:left;
+
    float:left;
 
  max-height:52px;
 
  max-height:52px;
 
  overflow: hidden;
 
  overflow: hidden;
Line 36: Line 38:
 
</head>
 
</head>
 
<body onload="run();">
 
<body onload="run();">
<div id="container"> This is text </div>
 
<div id="c1">This is more text that will go on and one forever and will never stop and until you turn off your computer.</div>
 
<div id="container2"> This is too </div>
 
 
<p>This is a paragraph of text.</p>
 
<p>This is a paragraph of text.</p>
<div style="position:relative; top:2em;">
+
<div>
 
   <p id="p1"> (scale) pixel ratio </p>
 
   <p id="p1"> (scale) pixel ratio </p>
 
   <p id="p2"> inner width </p>
 
   <p id="p2"> inner width </p>
Line 46: Line 45:
 
</body>
 
</body>
 
</html>
 
</html>
 +
[[category:Techniques]]

Latest revision as of 14:22, 18 December 2015

This page demonstrates how the page width changes when a page is zoomed on desktop sites. This shows how responsive breakpoints are triggered on the desktop by browser zoom.

Responsive Test

This is a paragraph of text.

(scale) pixel ratio

inner width