For this assignment, you are tasked with creating a reading experience using at least 2 distinct device contexts. Just using HTML & CSS @MEDIA QUERIES (JavaScript/jQuery is not necessary, but you are free to buttress your work with it should you choose to), create a single webpage that has 2 distinct but related styles & sets of content depending on whether the page is viewed on desktop, or on a mobile device.
What you show/hide/scale/move should be based on the context and the type of information you expect one would need to access within each context. Images can be used, and further experimentation with web fonts is encouraged!
Lastly, explain your idea in the form of comments at each breakpoint in your CSS.
- preservation-and-permanence.html
- mushroom-at-the-end-of-the-world.html
- what-comes-after-the-environment.html
In your HTML file be sure to add the following between <head> and </head>:
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>This is required in order for you to see your media queries work at their corresponding resolutions. Feel free to use example-4-context as a starting point.
Some worthwhile resources:
- A Practical Guide to CSS Media Queries
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
- https://the-responsive.com/
- https://danielswanick.com/gifs-explaining-responsive-design/ gifs on responsive design
- https://longstoryshort.glitch.me/
- https://littlefragments.com/
- https://screensizemap.com/
- https://simplecss.eu/pxtoems.html