[SHARING] Responsive design example code

A discussion came up in another thread today about responsive design. It seems that it is a work in progress for IBI, so I thought I would share some code I used for a responsive design project I completed a few months ago. I did not have time to try to do it the IBI way, so I resorted to standard HTML/CSS coding to make the responsive design work.

Below is the example code. Remove the first line and the last line, save to an HTML file, then open with a browser. Growing or shrinking the browser should make the page layout change at some point. The page itself is full of commentary, so I won't post any more comments here.

If anyone views this page on an actual mobile device, I would appreciate some feedback because I never get to test on actual mobile devices for security reasons.

<!-- Remove this line
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
	body {
      width:100%;
      height:100%;
      background-color:#efefef;
      font-family:Calibri,sans-serif;
      font-size:62.5%;
      margin:8px auto;
      margin-top:1%;
      margin-bottom:1%;
    }
    .display_table {
      display:table;
      background-color:lightgray;
      width:100%;
    }
    .display_cell {
      display:table-cell;
      width:50%;
      font-size:1.6em;
    }
    #container {
      width:100%;
      -webkit-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.47);
      -moz-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.47);
      box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.47);
    }

    /* CSS Media Queries */
    @-ms-viewport {
    width: device-width;
    }
	
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
     [class="display_cell"] { display:block; width:100%; }
    }

    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 321px) {
     [class="display_cell"] { display:table-cell; width:50%; }
    }

    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width : 320px) {
     [class="display_cell"] { display:block; width:100%; }
    }

    /* iPads (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px) {
     [class="display_cell"] { display:table-cell; width:50%; }
    }

    /* iPads (landscape) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape) {
     [class="display_cell"] { display:table-cell; width:50%; }
    }

    /* iPads (portrait) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait) {
     [class="display_cell"] { display:block; width:100%; }
    }
    /*********
    iPad 3
    *********/
    @media
    only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape)
    and (-webkit-min-device-pixel-ratio : 2) {
     [class="display_cell"] { display:table-cell; width:50%; }
    }

    @media
    only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio : 2) {
     [class="display_cell"] { display:block; width:100%; }
    }

    /* Desktops and laptops ----------- */
    @media only screen
    and (min-width : 1224px) {
     [class="display_cell"] { display:table-cell; width:50%; }
    }

    /* Large screens ----------- */
    @media only screen
    and (min-width : 1824px) {
     [class="display_cell"] { display:table-cell; width:50%; }
    }

    /* iPhone 4 ----------- */
    @media
    only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px)
    and (orientation : landscape)
    and (-webkit-min-device-pixel-ratio : 2) {
     [class="display_cell"] { display:block; width:100%; }
    }

    /* LG Optimus L70 portrait ----------- */
    @media
    only screen
    and (min-device-width : 384px)
    and (max-device-width : 640px)
    and (orientation : portrait) {
    /* Styles */
     [class="display_cell"] { display:block; width:100%; }
    }

    /* Nokia N9 portrait ----------- */
    @media
    only screen
    and (min-device-width : 360px)
    and (max-device-width : 640px)
    and (orientation : portrait) {
    /* Styles */
     [class="display_cell"] { display:block; width:100%; }
    }

    @media
    only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px)
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
     [class="display_cell"] { display:block; width:100%; }
    }
    </style>
  </head>
  <body>
    <div id="container">
	
      <div class="display_table">
        <div id="panel1" class="display_cell" style="background-color:#efefef;padding:4px">
		  <center><h3>DIV #1</h3></center>
		  This is an example of responsive design using HTML DIV tags,
		  the table-cell display property and CSS media queries.
		  <br><br>
		  Four colored HTML DIVs will be displayed, each with text inside of
		  them.
		  <br><br>
		  The DIVs will have their display properties set to "table-cell" if
		  there is enough room on the display device, which will result in
		  two DIVs on top and two on the bottom.
		  <br><br>
		  If there is not enough width on the display, the DIVs will have their display
		  properties set to "block" instead. This will result in all four DIVs being
		  stacked vertically on the display.
		  <br></br>
		  This is accomplished by using CSS media queries, which can change
		  CSS properties based on the size of the display device. The devices are
		  tested for both portrait and landscape display modes.
		  <br><br>
		  The code for this example is a mix of HTML and CSS, and can be
		  saved to a local disk file and opened without a web server.
		  <br> 
        </div>
        <div id="panel2" class="display_cell" style="background-color:#bbffbb;padding:4px">
          <center><h3>DIV #2</h3></center>
		  DIVs can be made to act like cells in an HTML table by changing their display
		  property to "table-cell" and placing them inside a DIV that has its display
		  property set to "table".
		  <br><br>
		  In this example, there are two "table" DIVs, each with two "table-cell" DIVs
		  inside of them. This results in what appears to be a 2 by 2 set of text panels.
		  Each table-cell DIV in each table DIV gets 50% of the display width.
		  <br><br>
		  When the browser is resized or a mobile device is changed to either portrait or
		  landscape mode, one of a group of CSS media queries for the appropriate display
		  screen size is executed. The table-cell DIVs will have their "display" and "width"
		  properties adjusted. These CSS properties will be either "display:block" and
		  "width:100%" (vertically stacked DIVs), or "display:table-cell" and "width:50%"
		  (for a 2 by 2 display).
		  <br></br>
		  The CSS media queries in this example cover a large number of possible mobile
		  devices, so you should be able to copy and paste them into your projects.
		  <br> 
        </div>
      </div>
	  
      <div class="display_table">
        <div id="panel3" class="display_cell" style="background-color:lightyellow;padding:4px">
          <center><h3>DIV #3</h3></center>
		  An example of a CSS media query is shown below:
		  <br><br>
		  <code>
			/* iPhone 4 ----------- */<br>
			@media<br>
			only screen
			and (min-device-width : 320px)<br>
			and (max-device-width : 480px)<br>
			and (orientation : landscape)<br>
			and (-webkit-min-device-pixel-ratio : 2) {<br>
			  [class="display_cell"] { display:block; width:100%; }<br>
			}<br>
		  </code>
		  <br>
		  This looks for displays (screens) with a minimum device width of 320px, a
		  maximum device width of 480px, in landscape mode, and a minimum pixel ratio
		  of 2. If found, the device is likely an iPhone 4. All DIVs with a class of
		  "display_cell" will have their display properties set to "block" and their
		  width properties set to "100%", resulting in all the DIVs being stacked
		  vertically on the iPhone 4.
		  <br> 
        </div>
        <div id="panel4" class="display_cell" style="background-color:pink;padding:4px">
          <center><h3>DIV #4</h3></center>
		  The Google Chrome web browser has an add-on called "mobile browser emulator".
		  It gives Chrome the ability to simulate what a responsive design web page will
		  look like when rendered on different mobile devices. This makes it easy to
		  see how a page will look on a device without needing to have a physical
		  device to test on.
		  <br><br>
		  More information here:  <a href="https://chrome.google.com/webstore/detail/mobile-browser-emulator/lbofcampnkjmiomohpbaihdcbjhbfepf?hl=en">mobile browser emulator</a>
		  <br> 
        </div>
      </div>
	  
    </div>
  </body>
</html>
Remove this line -->

App Studio
WebFOCUS 8.1.05M
Windows, All Outputs

Posts: 594 | Location: Michigan | Registered: September 04, 2015

Waz

Expert

posted