Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Front-End Development > Responsive Design > Flashcards

Responsive Design Flashcards

1
Q

Responsive design refers to the ability of a website to resize and reorganize its content based on:

A

The size of other content on the website.
The size of the screen the website is being viewed on.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What kind of values are pixels?

A

fixed, hard coded values.

When a screen size changes (like switching from landscape to portrait view on a phone), elements sized with pixels can appear too small, overflow the screen, or become completely illegible.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What kid of measurements can you use in CSS?

A

Hard coded measurements andrelative measurements

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Why do relative measurements offer an advantage over hard coded measurements?

A

They allow for the proportions of a website to remain intact regardless of screen size or layout.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is em?

A

represents the font-size of the current element or the default base font-size set by the browser if none is given

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

1 em = ____

A

16 pixels

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is rem?

A

Rem stands for root em

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the difference between em and rem?

A

Instead of checking parent elements to size font, it checks the root element. The root element is the <html> tag.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Most browsers set the font size of<html>to ______, so by default rem measurements will be compared to that value.

A

16 pixels

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How do you set a different font size for the root element?

A

You can add a CSS rule.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

When would it be best to use em?

A

If you’re interested in sizing elements in comparison to other elements nearby, then the em unit would be better suited for the job.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

When would it be best to use rem?

A

One advantage of using rems is that all elements are compared to the same font size value, making it easy to predict how large or small font will appear. If you are interested in sizing elements consistently across an entire website, the rem measurement is the best unit for the job.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What should you use if you want to size non-text HTML elements relative to their parent elements on the page?

A

Percentages

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Within CSS percentages are often used for what?

A

Often used to size box-model values, like width and height, padding, border, and margins. They can also be used to set positioning properties (top, bottom, left, right).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Why do you have to be careful using percentages?

A

When percentages are used, elements are sized relative to the dimensions of their parent element (also known as a container). Be careful, a child element’s dimensions may be set erroneously if the dimensions of its parent element aren’t set first.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Why should you not set an elements width to 100%?

A

Because the box model includes padding, borders, and margins, setting an element’s width to 100% may cause content to overflow its parent container. While tempting, 100% should only be used when content will not have padding, border, or margin.

17
Q

What is the difference in using percentages for height + width versus padding + margin?

A

When height and width are set using percentages, you learned that the dimensions of child elements are calculated based on the dimensions of the parent element.

When percentages are used to set padding and margin, however, they are calculated based only on the width of the parent element. This is for both horizontal and vertical.

18
Q

If you set margin-left to 50% what will happen?

A

For example, when a property like margin-left is set using a percentage (say 50%), the element will be moved halfway to the right in the parent container (as opposed to the child element receiving a margin half of its parent’s margin).

19
Q

When should you use em + rem versus percentages?

A

When using relative sizing, ems and rems should be used to size text and dimensions on the page related to text size (i.e. padding around text). This creates a consistent layout based on text size. Otherwise, percentages should be used.

20
Q

How can you can limit how wide an element becomes?

A

min-width — ensures a minimum width for an element.
max-width — ensures a maximum width for an element.

21
Q

What properties ensure that content is legible by limiting the minimum and maximum widths?

A

min-width
max-width

22
Q

Why should you use pixels for min-width and max-width?

A

The unit of pixels is used to ensure hard limits on the dimensions of the element(s).

23
Q

How do you limit the minimum and maximum height of an element?

A

min-height — ensures a minimum height for an element’s box.
max-height — ensures a maximum height for an element’s box.

24
Q

What will happen to the contents of an element if the max-height property is set too low for that element?

A

It’s possible that content will overflow outside of the element, resulting in content that is not legible.

25
Q

What is the very commondesign pattern used to scale images and videos proportionally?

A

.container {
width: 50%;
height: 200px;
overflow: hidden;
}

.container img {
max-width: 100%;
height: auto;
display: block;
}

26
Q

When percentages are used to size padding and width, dimensions are set relative to which of the following?

A

The width of the parent element

27
Q

Which of the following property/value pairs will ensure that the background image of the div in the code below will scale proportionally while filling the entire div?

div {
background-image: url(‘#’);
background-repeat: no-repeat;
background-position: center;
/* ? */
}

A

background-size: cover

Ensures that the background image of the div scales as large as possible proportionally to cover the entire element. If the dimensions of the image exceed the dimensions of the div the image will be cropped, leaving no empty space

28
Q

The code below will display images in which of the following ways?

.container {
width: 50%;
height: 200px;
overflow: hidden;
}

.container img {
max-width: 100%;
height: auto;
display: block;
}

A

Images will shrink to the full width of their container, scale proportionally, and display partially if the image dimensions exceed container dimensions

max-width: 100%; makes our .container img element shrink to the full width of the .container element, height: auto; will allow our image to scale proportionally with the width, and the overflow: hidden; property on the .container element ensures that if the image dimensions exceed the container dimensions, the overflowing content will be hidden from view.

29
Q

When percentages are used to size height and width, dimensions are set relative to what?

A

The parent of a child element

Front-End Development (4 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions