1.4 Responsive Layouts Flashcards
What is responsive website design?
It’s creating websites for different device screen sizes.
What are the 3 parts of responsive website design?
Responsive design consists of fluid grids, fluid images, and media queries
Why is responsive website design preferred over traditional techniques?
It’s more sustainable as devices and screen sizes have changed greatly over the years.
Did early websites take their inspiration from print design?
Yes, much of the web initially was based off of print design.
Has responsive website design shifted towards absolute or relative sizes?
Relative sizing has been preferable given variety of devices.
What are units for relative sizes?
Relative units are like percentages and EMs.
Name 2 percentages for a 2 column layout
75%/25% 50%/50% Any combination that equals 100%
Which container are percentages relative to?
Percentages are relative to parent container size.
What is a media query?
Media queries are CSS rules that include CSS code only when certain conditions are met.
Media queries are a feature of CSS that enable web page content to adapt to different screen sizes and resolutions.
What’s a media feature?
Media features are an expression or set of conditions inside of a media query.
Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device.
When would media features apply?
For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.
What does the media feature of orientation do?
It controls the orientation of the viewport
Vertical or Horizontal to improve viewing experience.
In the lesson, what happened when the
orientation was changed to landscape?
The header size shrank to fit the viewport better.
The aside was visible on the side.
The content required less scrolling to see.
Consider the following media query:
There are expressions before and after the boolean operator and. When will this media query be applied?
The media query will be applied only if
BOTH expressions are true.
What is a logical operator?
Logical operators can be used to compose a complex media query, by defining conditions for CSS code rules.
What are the 3 logical operators most used?
The logical operators not, and, and only can be
used to compose a complex media query.
What does the AND logical operator indicate?
Both conditions need to be met for the rules to apply.
How are commas used in media query declarations?
Commas are used to separate multiple media queries to combine the queries into the same rule. In the spirit of DRY, this is writing concise code.
What is pagination?
Pagination refers to page order sequence.
What are some advantages of using pagination in UI?
Usability: Easily recognized method,
Engagement: find items quickly,
Performance: page loads faster
What is a flexbox container?
It’s the constraint that places the
exterior boundary on flexbox items.
What’s the purpose of a flexbox container?
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).
What are flexbox items?
These are elements that reside inside of flexbox containers.
What does display flex mean?
Flex stands for flexible.
When set to display flex it enables flex
context for its direct flex children.
What’s the difference between column and column reverse?
Columns: forward
Column Reverse: backwards
What’s the direction of row?
Row moves from left to right.
Reverse moves from right to left.
Consider the following media query:
Will this media query be applied if the width of the browser is 768 pixels across?
Yes. The min-width media feature is inclusive, so a brower width that is equal to the min width will make the media query true.
