Responsive Web Design.html (3396B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html><head><link rel="stylesheet" type="text/css" href="sitewide.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 6.13.3 (455969)"/><meta name="author" content="Alex Balgavy"/><meta name="created" content="2018-01-07 3:39:23 PM +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2018-01-18 4:21:35 PM +0000"/><title>Responsive Web Design</title></head><body><div><ul><li>variety of devices (handheld have different screen sizes)</li><li>device independence: functional UX via any access mechanism</li><li>responsive web design makes a page look good on all devices</li><li>solutions</li><ul><li>fluid grids — percent instead of pixels</li><li>fluid images — max width at 100%</li><li>media queries (below</li></ul></ul></div><div><br/></div><div><span style="font-weight: bold;">Media queries</span></div><div>CSS used media types (screen, print, etc.) to target a specific class of devices, but most browsers didn’t really implement its functionality</div><div>in CSS3, the W3C included media queries to inspect physical characteristics of the device being used</div><div>either in a <span style="font-family: "Courier New";"><link> </span><span style="font-family: "Helvetica Neue";">tag:</span></div><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="font-family: "Courier New";"><link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="stylesheet.css" /></span></div><div><br/></div></blockquote><div><span style="font-family: "Helvetica Neue";">or in a </span><span style="font-family: "Courier New";">@media </span><span style="font-family: "Helvetica Neue";">rule inside the actual CSS file:</span></div><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="font-family: "Courier New";">@media screen and (max-device-width: 480px) {</span></div></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="font-family: "Courier New";">.column {</span></div></blockquote></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="font-family: "Courier New";">float: none;</span></div></blockquote></blockquote></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><span style="font-family: "Courier New";">}</span></blockquote></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="font-family: "Courier New";">}</span></div></blockquote><div><br/></div><div><span style="font-family: "Helvetica Neue";">using this stuff, you can disable floats and set the width/margin for specific screen sizes</span></div><div><br/></div></body></html>