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