Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
Overview
| Comment: | Add the mediaquery.tcl example script. |
|---|---|
| Downloads: | Tarball | ZIP archive | SQL archive |
| Timelines: | family | ancestors | descendants | both | trunk |
| Files: | files | file ages | folders |
| SHA3-256: |
c73616411143f6647996bab46550d2e8 |
| User & Date: | drh 2018-08-31 15:01:58 |
Context
|
2018-11-27
| ||
| 17:27 | Update the built-in SQLite to the lastest 3.26.0 beta for testing. check-in: 6a4d54bab7 user: drh tags: trunk | |
|
2018-08-31
| ||
| 15:01 | Add the mediaquery.tcl example script. check-in: c736164111 user: drh tags: trunk | |
| 01:10 | Fix the doclist.html document so that it works for non-root repositories. check-in: f7863d2470 user: drh tags: trunk | |
Changes
Added examples/mediaquery.tcl.
1 +# This application demonstrates responsive CSS design principles using 2 +# the media-query mechanism. To run this app: 3 +# 4 +# wapptclsh mediaquery.tcl --server 8080 5 +# 6 +# Then connect various devices to see how their display changes according 7 +# to the viewport size. Or resize the browser window. Or twist the 8 +# handheld device between landscape and portrait modes. 9 +# 10 +# The foreground and background colors change according to the viewport size 11 +# of the device. In a real application, the CSS would be extended to make 12 +# other changes according to the viewport size. 13 +# 14 +source wapp.tcl 15 +proc wapp-default {} { 16 + wapp-content-security-policy {default_src 'self' 'unsafe-inline'} 17 + set top [wapp-param SCRIPT_NAME] 18 + wapp-trim { 19 + <!DOCTYPE html> 20 + <html> 21 + <head> 22 + <meta name="viewport" content="width=device-width,initial-scale=1.0"> 23 + <link href="%url($top/style.css)" rel="stylesheet"> 24 + </head> 25 + <body> 26 + <h1>Media Query Breakpoints</h1> 27 + <div class="media-bg"> 28 + <p>Viewport-size: <span id="screen-size"></span> 29 + <ul> 30 + <li> Red: width <= 600 31 + <li> Orange: 600 < width <= 768 32 + <li> Yellow: 768 < width <= 992 33 + <li> Green: 992 < width <= 1200 34 + <li> Blue: 1200 < width 35 + </ul> 36 + </div> 37 + </body> 38 + <script> 39 + function setwidth(){ 40 + x = document.getElementById("screen-size"); 41 + x.innerHTML = window.innerWidth + "px by "+window.innerHeight+"px" 42 + } 43 + window.onresize = setwidth; 44 + setwidth(); 45 + </script> 46 + </html> 47 + } 48 +} 49 +proc wapp-page-style.css {} { 50 + wapp-mimetype text/css 51 + wapp-cache-control max-age=3600 52 + wapp-trim { 53 + @media screen and (max-width: 600px) { 54 + /* Smallest devices, small phones. Less than 600px */ 55 + .media-bg {background:red;color:white;} 56 + } 57 + @media screen and (min-width: 600px) { 58 + /* Large phones and tablets in portrait mode. 600px and up */ 59 + .media-bg {background:orange;color:black;} 60 + } 61 + @media screen and (min-width: 768px) { 62 + /* landscape tablets. 768px and up */ 63 + .media-bg {background:yellow;color:black;} 64 + } 65 + @media screen and (min-width: 992px) { 66 + /* laptops and desktops. 992px and up */ 67 + .media-bg {background:green;color:white;} 68 + } 69 + @media screen and (min-width: 1200px) { 70 + /* wide-screen desktops. 1200px and up */ 71 + .media-bg {background:blue;color:white;} 72 + } 73 + } 74 +} 75 +wapp-start $argv