- What is a breakpoint? A break point is the window/device size at which a fluid the page as it collapses no longer looks good.
How can you find them? By resizing the window of the page either physically or using a tool like resizer.
What do you use them for? When you identify these points you can then begin to adjust the CSS to resize fonts and distribute the page
- What tools/resources have you found to help you with finding breakpoints? Resizer
- What is that cool thing Chris did with adding text content only at certain screen sizes? He used the CSS pseudo element “content”.
What code was used and what are a couple of situation that you can imagine where you could do something like that?
@media all and (max-width: 1000px) and (mid-width: 700px) {
content: “Text that will be displayed ”; }This can be used to display text or a graphic using CSS instead of having to change the HTML at different screen sizes.
- How do media queries work? With media queries you can tell the browser what to do if the browser window is narrower or wider.
- Find an article on media queries that you find informative on best practices for media queries and be ready to share it. What did you find useful about the article? The article had great tips particularly about using Sass to keep track of break points.
The article should answer one or more of these kinds of questions:
- Where do you place media queries? You can place them in separate style sheets based on the media size and then link the style sheet(s) to the HTML page OR you can add the media queries at the end of the main style sheet
- How many media queries should you have? Keep it simple. Don’t go overboard. Focus on the main break points.
- How can you find breakpoints? Let content determine this.
- How do you know what needs to change at smaller sizes? If text is too small or layout looks bad at a smaller size, you know you need to make adjustments.
- What are innovative uses for media queries? Showing /Hiding the main menu
Cool tricks? Adding content using the pseudo element “content”. Things you’d never have thought of using them for? Something called conditional loading. - Post a link to a site you’ve worked on that uses media queries, if you’ve done one: