Responsive and Mobiel Flashcards
What are media queries?
Are used to specify how a document is present on different media (e.g., screen and print)
CSS is applied based on specific conditions, such as viewport width or device orientation
What are breakpoints?
Breakpoints are the requirements (e.g., viewport width) used to determine when to change the syles and layout of your webpage
NOTE: Commonm to use around three breakpoints to optimize for mobile, tablet, and desktop
What are the two mobile first design concepts?
Graceful degration
1) Design for modern browsers first
2) Provide fallbacks for unsupported features
3) Ensure basic functionality works for older browsers
Progressive Enhancement
1) Focus on content and accessibility first
2) Create base-level experience first
3) Add advance features for enhancements
Explain graceful degration and mobile
Start with a full-featured, desktop-centric website
Remove, rearrange, and restyle content for smaller viewports
Decrese bandwidth usage (remove large images and video)
Exokaub the progressive enhnacement and mobiel approach
1) Focus on the best experience for mobile first
2) Reduce reliance on mouse actions
3) Load content quickly and easily for small screens
4) Determine the essentials at the beginning
5) Add enhancements rather than removing them
How do you create a flxible layout?
1) You start with fluid CSS before adding responsive CSS
This makes the content fit relative to its container
2) Use percentage-based widths for page components
3) Use min or max widths to add constraints to the layout while maintaining flexibility
Mostly using width fluid changes over height changes. You don’t want to restrict the height of the material
What is the difference between fluid and responsive?
Fluid layouts are relative, but the content and components only get wider or narrower
Responsive layours change based on screen size
What are media queries?
They create conditions for applying specific CSS style. They contain media type and media feature
What are media types?
Print: Matches to printers and other print-related displays
Speech: Matches screen readers
Screen: Matches all devices that are not print or speech
All: Matches to all devices
What are media features?
Has the same syntax as CSS properties
Used to describe the requirements of a device
Specifies a single feature of the device (e.g., width, height, device orientation, and more)
Width vs. Min and Max Width
Width referes to the width of the brower’s visible screen area or viewport including the size of a scroll bar (if applicable)
@media(max-width: 768px) {
{
