Notes for Responsive Web Design By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 3 Marcotte, Ethan. “Responsive Web Design”. A List Apart, 25 May 2010, http://alistapart.com/article/responsive-web-design. Web. 15 May 2014. ## Slide 4 Emphasis added Wikipedia contributors. “Responsive web design”. Wikipedia, The Free Encyclopedia, 8 July 2022, https://en.wikipedia.org/wiki/Responsive_web_design. Web. 24 Aug. 2022. ## Slide 5 “Home | Saint Louis Zoo”. Saint Louis Zoo, 20 Apr 2016, http://www.stlzoo.org. Web. 20 Apr 2016. ## Slide 6 The Saint Louis Zoo, before becoming responsive “Home | Saint Louis Zoo”. Saint Louis Zoo, 2 Feb 2014, https://stlzoo.org. Web. 4 Feb 2014. ## Slide 7 The Saint Louis Zoo, after becoming responsive “Home | Saint Louis Zoo”. Saint Louis Zoo, 2 Feb 2014, https://stlzoo.org. Web. 4 Feb 2014. ## Slide 12 MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 15 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. ## Slide 16 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 17 Deveria, Alexis [@Fyrd]. “CSS at-rule: @media”. Can I use…, , https://caniuse.com/mdn-css_at-rules_media. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. Deveria, Alexis [@Fyrd]. “CSS3 Media Queries”. Can I use…, , https://caniuse.com/css-mediaqueries. Web. 18 Apr 2023. ## Slide 23 MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 28 MDN contributors. “Introducing the CSS Cascade”. MDN Web Docs, 15 Apr 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade. Web. 18 Apr 2023. ## Slide 31 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. ## Slide 32 Browsers do not support speech Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. ## Slide 33 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. ## Slide 34 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. ## Slide 40 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Web. 18 Apr 2023. ## Slide 43 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Web. 18 Apr 2023. ## Slide 44 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Web. 18 Apr 2023. ## Slide 47 Confusing, because min is bigger than & max is smaller than! Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. ## Slide 49 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. ## Slide 50 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. ## Slide 51 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 52 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. ## Slide 54 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. ## Slide 55 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#mf-dimensions. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. ## Slide 56 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. ## Slide 60 https://en.wikipedia.org/wiki/File:Grid2aib.svg ## Slide 61 https://en.wikipedia.org/wiki/File:Grid2aib.svg, modified to remove the white lines ## Slide 65 https://en.wikipedia.org/wiki/Rule_of_thirds ## Slide 66 Image aligned according to Rule of Thirds https://en.wikipedia.org/wiki/File:Rivertree_thirds_md.gif ## Slide 67 Image aligned according to Rule of Thirds https://en.wikipedia.org/wiki/File:Rivertree_thirds_md.gif ## Slide 68 Image cropped without & with the Rule of Thirds https://en.wikipedia.org/wiki/File:RuleOfThirds-SideBySide.gif ## Slide 69 Image cropped without & with the Rule of Thirds https://en.wikipedia.org/wiki/File:RuleOfThirds-SideBySide.gif ## Slide 73 Wikipedia contributors. “CSS framework”. Wikipedia, The Free Encyclopedia, 17 Jan. 2023, https://en.wikipedia.org/wiki/CSS_framework. Web. 20 Apr. 2023. ## Slide 74 https://en.wikipedia.org/wiki/Software_framework ## Slide 77 https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework) FIXME update ## Slide 78 Wikipedia contributors. “Bootstrap (front-end framework)”. Wikipedia, The Free Encyclopedia, 9 Apr. 2023, https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29. Web. 20 Apr. 2023. “As of May 2015, [Bootstrap 3] was the most-starred project on GitHub, with over 81,000 stars and more than 32,000 forks.” ## Slide 79 FIXME Update list with citations Docker, Envato, JetBrains, Red Hat, Trello, Visual Studio Code “Lead Lists”. Wappalyzer, https://www.wappalyzer.com/lists/?technologies=bootstrap. Web. 20 Apr 2023. Apple, Duolingo, Instacart, LinkedIn, Lyft, MasterCard, Reuters, Snap, Spotify, Udemy, Upwork, Vogue Samuel, Ajayi Abimbola. “Top 10 Big Companies Using Bootstrap”. Career Karma, 5 Aug 2022, https://careerkarma.com/blog/companies-that-use-bootstrap/. Web. 20 Apr 2023. Accenture, Coursera, Duolingo, ROBLOX, MasterCard, Upwork, Docker, SAP, Riot Games, GrubHub, LinkedIn, Lyft, Robinhood, Snap, Spotify, Udemy “Bootstrap - Reviews, Pros & Cons | Companies using Bootstrap”. stackshare, https://stackshare.io/bootstrap. Web. 20 Apr 2023. ## Slide 80 Bootstrap 3 was released in July 2013 FIXME update ## Slide 81 Wikipedia contributors. “Bootstrap (front-end framework)”. Wikipedia, The Free Encyclopedia, 9 Apr. 2023, https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29. Web. 20 Apr. 2023. ## Slide 82 http://getbootstrap.com ## Slide 83 https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework) ## Slide 86 http://en.wikipedia.org ## Slide 87 http://en.wikipedia.org ## Slide 88 http://en.wikipedia.org ## Slide 89 http://en.wikipedia.org ## Slide 90 6 margins: 3 left, 3 right ## Slide 95 6 margins: 3 left & 3 right ## Slide 105 https://www.youtube.com/watch?v=-3gw1XddJuc ## Slide 108 http://codepen.io/websanity/pen/toiHp ## Slide 110 Marcotte, Ethan. “Responsive Web Design”. A List Apart, 25 May 2010, http://alistapart.com/article/responsive-web-design. Web. 15 May 2014. ## Slide 111 Emphasis added Wikipedia contributors. “Responsive web design”. Wikipedia, The Free Encyclopedia, 8 July 2022, https://en.wikipedia.org/wiki/Responsive_web_design. Web. 24 Aug. 2022. ## Slide 112 “Home | Saint Louis Zoo”. Saint Louis Zoo, 20 Apr 2016, http://www.stlzoo.org. Web. 20 Apr 2016. ## Slide 116 Dark gray columns are the hidden layout grid; light gray boxes are the elements spanning multiple columns (except in the bottom one) ## Slide 119 Based around breakpoints: viewport widths (defined by media query declarations) that change the layout & appearance of the webpage once the viewport is within the range defined by the media query ## Slide 120 Bootstrap 3 is pretty old, but it is also simpler than newer versions of Bootstrap, which is why I used it here FIXME add screenshots for lg, sm, xs ## Slide 121 4 (Bootstrap 3), 5 (Bootstrap 4), & 6 (Bootstrap 5) ## Slide 124 Fontbonne University ## Slide 134 Otto, Mark, Jacob Thornton, and Bootstrap contributors. “Introduction”. Bootstrap v5.1, 5 Oct. 2021, https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template. Web. 19 Apr 2022. Licensed CC BY 3.0: https://creativecommons.org/licenses/by/3.0/. ## Slide 136 FIXME This should go first ## Slide 137 http://www.stlzoo.org ## Slide 138 http://www.granneman.com ## Slide 143 FIXME spacing on 3 ## Slide 147 Otto, Mark, Jacob Thornton, and Bootstrap contributors. “Bootstrap · The most popular HTML, CSS, and JS library in the world”. Bootstrap, 18 Apr 2023, https://getbootstrap.com. Web. 20 Apr 2023. ## Slide 148 Otto, Mark, Jacob Thornton, and Bootstrap contributors. “Download · Bootstrap v5.3”. Bootstrap, 18 Apr 2023, https://getbootstrap.com/docs/5.3/getting-started/download/. Web. 20 Apr 2023. ## Slide 156 Bootstrap 4.1.3 ## Slide 169 https://jquery.com ## Slide 171 https://www.akamai.com/us/en/cdn/, accessed 2020-07-28 ## Slide 173 Akamai Newsroom > Media Resources https://www.akamai.com/us/en/about/news/media-resources.jsp ## Slide 178 Bootstrap 3 CDN template: http://chnsa.ws/1b2 ## Slide 189 FIXME give quick example ## Slide 193 Bootstrap 3’s bootstrap.css was ~7000 lines ## Slide 194 http://getbootstrap.com/ ## Slide 195 Get Bootstrap showing dropdown for versions 2.3.2, 3.3.7, & 4.x.x as of 2018-10-30 http://getbootstrap.com/ ## Slide 196 http://getbootstrap.com/docs/4.1/getting-started/introduction/ ## Slide 197 http://getbootstrap.com/docs/4.1/examples/ ## Slide 198 https://themes.getbootstrap.com/ ## Slide 199 https://expo.getbootstrap.com/ ## Slide 200 https://blog.getbootstrap.com/ ## Slide 201 http://getbootstrap.com/docs/4.1/getting-started/introduction/ ## Slide 202 http://getbootstrap.com/docs/4.1/layout/overview/ ## Slide 203 http://getbootstrap.com/docs/4.1/content/reboot/ ## Slide 204 http://getbootstrap.com/docs/4.1/components/alerts/ ## Slide 205 http://getbootstrap.com/docs/4.1/utilities/borders/ ## Slide 206 http://getbootstrap.com/docs/4.1/extend/approach/ ## Slide 207 http://getbootstrap.com/docs/4.1/migration/ ## Slide 208 http://getbootstrap.com/docs/4.1/about/overview/ ## Slide 210 http://getbootstrap.com/docs/4.1/content/images/ ## Slide 211 http://getbootstrap.com/docs/4.1/content/images/#image-thumbnails ## Slide 212 http://getbootstrap.com/docs/4.1/content/images/#image-thumbnails ## Slide 213 http://getbootstrap.com/docs/4.1/utilities/borders/ ## Slide 214 http://getbootstrap.com/docs/4.1/utilities/borders/#border-radius ## Slide 215 Get Bootstrap showing dropdown for versions 2, 3, & 4 as of 2017-11-28 ## Slide 217 http://getbootstrap.com/css ## Slide 218 http://getbootstrap.com/css/#images ## Slide 219 http://getbootstrap.com/css/#images-shapes ## Slide 220 http://getbootstrap.com/components/ ## Slide 221 http://getbootstrap.com/javascript ## Slide 222 http://getbootstrap.com/customize/ ## Slide 225 http://getbootstrap.com/css/#images-shapes ## Slide 231 https://getbootstrap.com/docs/4.5/utilities/borders/#border-radius Note: .rounded-lg & .rounded-sm have been changed in Bootstrap 5 & don’t work right anyway, so don’t use them ## Slide 232 FIXME ## Slide 241 http://getbootstrap.com/components/#breadcrumbs ## Slide 249 https://getbootstrap.com/docs/4.5/components/breadcrumb/ ## Slide 253 http://www.fileformat.info/info/unicode/char/search.htm Or go to http://www.fileformat.info & click on Characters on the left next to Unicode ## Slide 254 http://www.fileformat.info/info/unicode/char/search.htm ## Slide 255 http://www.fileformat.info/info/unicode/char/27a4/index.htm ## Slide 256 http://www.fileformat.info/info/unicode/char/27a4/browsertest.htm ## Slide 257 http://www.fileformat.info/info/unicode/char/27a4/browsertest.htm ## Slide 271 https://getbootstrap.com/docs/3.4/css/#grid ## Slide 272 https://getbootstrap.com/docs/3.4/css/#grid https://getbootstrap.com/docs/4.6/layout/overview/ ## Slide 273 https://getbootstrap.com/docs/4.6/layout/overview/ https://getbootstrap.com/docs/5.1/layout/breakpoints/ ## Slide 274 http://codepen.io/websanity/pen/toiHp FIXME change to Bootstrap 4 screenshots ## Slide 275 http://codepen.io/websanity/pen/toiHp ## Slide 276 http://codepen.io/websanity/pen/toiHp ## Slide 277 http://codepen.io/websanity/pen/toiHp ## Slide 278 http://codepen.io/websanity/pen/toiHp ## Slide 279 Anderson, Shaun. “What are the best screen sizes for responsive web design?”. Hobo SEO Consultancy, 27 Mar 2023, https://www.hobo-web.co.uk/best-screen-size/#:~:text=Design%20for%20desktop%20displays%20from,962%20through%201280%C3%97800. Web. 17 May 2023. ## Slide 280 Anderson, Shaun. “What are the best screen sizes for responsive web design?”. Hobo SEO Consultancy, 27 Mar 2023, https://www.hobo-web.co.uk/best-screen-size/#:~:text=Design%20for%20desktop%20displays%20from,962%20through%201280%C3%97800. Web. 17 May 2023. ## Slide 295 http://codepen.io/websanity/pen/pJNvyQ?editors=100 ## Slide 296 http://codepen.io/websanity/pen/pJNvyQ?editors=100 ## Slide 297 http://codepen.io/websanity/pen/pJNvyQ?editors=100 ## Slide 303 http://codepen.io/websanity/pen/aOBzKN?editors=100 ## Slide 305 http://codepen.io/websanity/pen/aOBzKN?editors=100 ## Slide 308 “Grid system”. Bootstrap, 19 May 2023, https://getbootstrap.com/docs/5.3/layout/grid/. Web. 19 May 2023. ## Slide 310 https://getbootstrap.com/docs/4.5/layout/grid/ ## Slide 311 https://getbootstrap.com/docs/4.5/layout/grid/ ## Slide 318 http://codepen.io/websanity/pen/OVbVmG?editors=100 ## Slide 319 http://codepen.io/websanity/pen/OVbVmG?editors=100 ## Slide 320 http://codepen.io/websanity/pen/OVbVmG?editors=100 ## Slide 321 http://codepen.io/websanity/pen/gpLpxE?editors=100 ## Slide 322 http://codepen.io/websanity/pen/gpLpxE?editors=100 ## Slide 327 http://startbootstrap.com ## Slide 329 http://startbootstrap.com/template-overviews/agency/ ## Slide 331 https://wrapbootstrap.com ## Slide 334 http://themes.getbootstrap.com ## Slide 335 http://themes.getbootstrap.com/collections/all ## Slide 336 http://themes.getbootstrap.com/collections/all ## Slide 337 http://themes.getbootstrap.com/collections/all ## Slide 338 http://bootstrap-themes.github.io/marketing/ ## Slide 339 http://bootstrap-themes.github.io/marketing/ ## Slide 340 http://bootstrap-themes.github.io/marketing/ ## Slide 341 http://bootstrap-themes.github.io/marketing/ ## Slide 342 http://bootstrap-themes.github.io/marketing/ ## Slide 343 http://bootstrap-themes.github.io/marketing/ ## Slide 344 http://bootstrap-themes.github.io/marketing/ ## Slide 345 http://bootstrap-themes.github.io/marketing/ ## Slide 346 http://themes.getbootstrap.com/collections/all ## Slide 349 http://lab.maltewassermann.com/viewport-resizer/ ## Slide 350 http://lab.maltewassermann.com/viewport-resizer/ ## Slide 351 http://lab.maltewassermann.com/viewport-resizer/ ## Slide 352 http://www.stlzoo.org ## Slide 353 http://www.stlzoo.org ## Slide 354 http://www.stlzoo.org ## Slide 355 http://www.stlzoo.org ## Slide 356 http://www.stlzoo.org ## Slide 359 http://chnsa.ws/wj ## Slide 366 https://www.browserstack.com/accounts/subscriptions ## Slide 367 https://www.browserstack.com/responsive ## Slide 368 https://www.browserstack.com/responsive ## Slide 369 https://www.browserstack.com/screenshots ## Slide 370 https://www.browserstack.com/start ## Slide 371 https://www.browserstack.com/start ## Slide 372 https://www.browserstack.com/start ## Slide 373 https://www.browserstack.com/start ## Slide 374 https://www.browserstack.com/start ## Slide 379 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Web. 18 Apr 2023. ## Slide 380 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Web. 18 Apr 2023. ## Slide 384 Atkins, Tab et al. “CSS Values and Units Module Level 4 [Editor’s Draft]”. W3C, 6 April 2023, https://w3c.github.io/csswg-drafts/css-values-4/#ratios. Web. 18 Apr 2023. MDN contributors. “”. MDN Web Docs, 21 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/ratio. Web. 18 Apr 2023. ## Slide 386 Deveria, Alexis [@Fyrd]. “types: ”. Can I use…, 17 April 2023, https://caniuse.com/mdn-css_types_ratio. Web. 18 Apr 2023. ## Slide 387 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 388 MDN contributors. “”. MDN Web Docs, 21 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/resolution. Web. 18 Apr 2023. ## Slide 389 MDN contributors. “”. MDN Web Docs, 21 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/resolution. Web. 18 Apr 2023. Deveria, Alexis [@Fyrd]. “types: ”. Can I use…, 17 Apr 2023, https://caniuse.com/mdn-css_types_resolution. Web. 18 Apr 2023. Deveria, Alexis [@Fyrd]. “types: : dppx unit”. Can I use…, 17 Apr 2023, https://caniuse.com/mdn-css_types_resolution_dppx. Web. 18 Apr 2023. Deveria, Alexis [@Fyrd]. “types: : dpi unit”. Can I use…, 17 Apr 2023, https://caniuse.com/mdn-css_types_resolution_dpi. Web. 18 Apr 2023. Deveria, Alexis [@Fyrd]. “types: : dpcm unit”. Can I use…, 17 Apr 2023, https://caniuse.com/mdn-css_types_resolution_dpcm. Web. 18 Apr 2023. Safari: “Bug 78087 - Enable the 'resolution' media query by default”. WebKit Bugzilla, 26 May 2022, https://bugs.webkit.org/show_bug.cgi?id=78087 As of 18 Apr 2023 ## Slide 390 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 391 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 392 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023. ## Slide 393 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#changes-2012. Web. 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Web. 18 Apr 2023.