ADDED examples/mediaquery.tcl Index: examples/mediaquery.tcl ================================================================== --- /dev/null +++ examples/mediaquery.tcl @@ -0,0 +1,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 { + + + + + + + +

Media Query Breakpoints

+
+

Viewport-size: +

+
+ + + + } +} +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