-
What is responsive web design?
It makes your web page look good on all devices. It is not a program or a JavaScript.
-
Should web pages leave out information to fit smaller devices?
No.
-
Responsive web design is when you use CSS and HTML to do what?
to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.
-
What is the viewport?
the user's visible area of a web page.
-
Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have what?
to have a static design and a fixed size.
-
HTML5 introduced a method to let web designers take control over the viewport, through which tag?
the <meta> tag
-
If the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in what?
a poor user experience
-
Many web pages are based on a grid-view, which means what?
The page is divided into columns.
-
A responsive grid-view often has how many columns, and has a total width of what?
12 columns and total width of 100%
-
When building a responsive grid-view, why are all HTML elements set to 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 a media query?
A CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.
-
When were media queries introduced?
in CSS3
-
What is a breakpoint?
Media queries add breakpoints where certain parts of the design will behave differently on each side of the breakpoint.
-
If the width property is set to 100%, a responsive image will do what?
When the height property is set to "auto" the image will be responsive and scale up and down.
-
If a background-image has the background-size property is set to “contain,” what will happen to the background-image?
The background image will scale and try to fit the content area. However, the image will keep its aspect ratio (the proportional relationship between the image's width and height)
-
If the background-size property is set to “100% 100%,” what will happen to the background image?
It will stretch to cover the entire content area.
-
If the background-size property is set to “cover,” what will happen to the background image?
The background image will scale to cover the entire content area. Notice that the "cover" value keeps the aspect ratio, and some part of the background image may be clipped.
-
Can you set different background images for different devices?
Yes.
-
List two free responsive web design frameworks.
W3.CSS, Bootsrap
-
Are the responsive web site templates at the W3Schools’ free to modify, save, share, and use in all your projects?
Yes.