RESPONSIVE Flashcards
What is Responsive web development?
Responsive web design is about using HTML and CSS to automatically resize a web. It’s also about making a website look good on all devices (laptops, desktops, phones and tablets.)
What is viewport?
The viewport is the users visible area of a web page,
What does <meta></meta> do?
It gives the browser instructions on how to control the pages dimensions and scaling.
Describe what width=device-width does?
This part sets the width of the page to follow the screen-width of the device.
Describe what initial-scale=1.0 does
This part sets the initial zoom level when the page is first loaded by the browser
What are rules to follow for the size content to the viewport?
- DO NOT use large fixed width elements.
- DO NOT let the content rely on a particular viewport width to render well.
- USE CSS media queries to apply different styling for small and large screens
If the browser is 600px or smaller what will happen?
The background colour will be light blue.
Why do all elements have the box-sizing property set to border-box?
It makes sure that the padding and border are included in the total width and height of the elements.
What is the typical break point for extra small devices? (Phones)
600px and down
What is the typical break point for small devices? (Portrait tablets and large phones?)
600px and up
What is the typical break point for medium devices? (Landscape tablets)
768px and up
What is the typical break point for large devices? (Laptops/desktops)
992px and up
What is the typical break point for extra large devices? (Large laptops and desktops)
1200px and up
What is grid-view?
When a page is divided into columns. It makes it easier to place elements on the page.
