Difference between revisions of "Responsive"

From Level Access Web Labs
Jump to navigation Jump to search
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
<!DOCTYPE>
+
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 13: 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 37: Line 38:
 
</head>
 
</head>
 
<body onload="run();">
 
<body onload="run();">
<div id="container"> This is text </div>
+
<p>This is a paragraph of text.</p>
<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>
<div id="container2"> This is too </div>
+
  <p id="p1"> (scale) pixel ratio </p>
<div stlye="position:relative; top:3em;"></div>
+
  <p id="p2"> inner width </p>
<p id="p1"> (scale) pixel ratio </p>
+
</div>
<p id="p2"> inner width </p>
 
 
</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