Exam (elaborations)
ISDS 3105 LSU Exam 2: Questions & Answers (100%)
- Course
- Institution
ISDS 3105 LSU Exam 2: Questions & Answers (100%)
[Show more]
Content preview
ISDS 3105 LSU Exam 2: Questions & Answers (100%)The part of the mobile layout that displays the web page content that fits
within a mobile screen. Right Ans - visual viewport
A design principle by which the overall page design starts with base styles
that apply to all devices followed by style rules specific to mobile devices.
Right Ans - mobile first
The part of the mobile layout containing the entire page content. Right Ans
- layout viewport
A pixel that refers to the actual physical pixel on a screen.
aside: {width: 300px;} does not refer to device pixels but css pixels Right
Ans - device pixel
A pixel that is the fundamental unit in CSS measurements. Right Ans - CSS
pixel
A measure of the number of device pixels matched to a single CSS pixel. When
a page is zoomed at a factor of 2x, the device-pixel ratio is 2, with a single CSS
pixel represented by a 2×2 square of device pixels
<link href="retina.css" rel="stylesheet" media="only screen and (-webkit-min-
device-pixel-ratio: 2) " /> Right Ans - device-pixel ratio
The central axis along which items within a flexbox are laid out; can point in
either the horizontal or vertical direction Right Ans - main axis
A symbol, usually represented as three horizontal lines, used to hide menu
items in mobile devices. Right Ans - navicon
The flexbox axis that is perpendicular to the main axis. Right Ans - cross
axis
A software program that duplicates the look and feel of a mobile device;
Browsers are starting to include these as part of their developer tools.
Right Ans - mobile device emulators
,the layout definition of the printed page. Right Ans - page box
The page section that contains the space between the printed content and the
edges of the page. Right Ans - margin area
The page section that contains the content of the document. Right Ans -
page area
The process of removing unnecessary characters from HTML and CSS files in
order to increase processing speed. Right Ans - Minifying
A style sheet that formats the printed version of the web document. Right
Ans - print style sheet
the design of the document changes in response to the device rendering the
page; has 3 components: flexible layout, responsive images, media queries
Right Ans - Responsive Design
the page layout automatically adjusts to screens of different widths Right
Ans - flexible layout
images that rescale based on the size of the viewing device Right Ans -
responsive images
determine the properties of the device rendering the page so that appropriate
designs can be delivered to specific devices; used to associate a style sheet or
style rule with a specific device or list of device features; When no media
attribute is used, it is assumed to apply to all devices accessing the web page.
Right Ans - media queries
media="devices"
i.e.
<link href="output.css" media="print, projection" /> Right Ans - Media
Queries in HTML
@media devices { style rules }
,i.e.
h1 {
color: red;
}
@media screen, tv {
h1 {font-size: 2em;}
}
@media print {
h1 {font-size: 16pt;}
}
@import url("screen.css") screen, projection; Right Ans - Media Queries in
CSS
media="devices and|or (feature:value)"
@media devices and|or (feature:value) { style rules }
@import url(url) devices and|or (feature:value);
i.e
@media screen and (device-width: 320px) { style rules } (applies the style
rules only for screen devices with a width of 320 pixels.)
@media all and (min-width: 320px and max-width: 480px) { style rules }
(applies to all media types but only when the width of the output devices is
between 320 and 480 pixels)
@media not screen and (max-width: 480px) { style rules } (applies only to
media devices that are not screen or do not have a maximum width of 480
pixels) Right Ans - To target a device based on its features (media query)
481 pixels or greater; 768 pixels Right Ans - Tablet styles are applied when
the screen width is ______________ and desktop styles build upon the tablet styles
when the screen width exceeds _______________
<meta name="viewport" content="properties" />
, i.e.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Right Ans - To match the width of the layout viewport to the device width
- have the most important information up-front and easily accessible, free of
unnecessary clutter.
- limit the choices you offer to your users; there should only be a few
navigation links on the screen at any one time. Right Ans - 2 key
components of web design for mobile devices
ul.submenu { display: none; } Right Ans - To hide a submenu:
a.submenuTitle:hover+ul.submenu, ul.submenu:hover { display: block; }
You can't use ul.submenu:hover selector alone because you can't hover over
the submenu until it's visible and it won't be visible until you first hover over
the submenu title. Right Ans - To display a nested submenu only when the
user hovers the mouse over its submenu title and remain visible as the
pointer moves away from the title and hovers over the now-visible submenu.
Keep it simple
Resize your images.
Scroll vertically (Limit yourself to one column of information in portrait
orientation and two columns in landscape.)
Make your links accessible. Right Ans - 4 ways to Optimize Your Site for the
Mobile Web
you need to establish a different grid layout for each class of screen size.
Right Ans - One of the challenges of a grid system approach under responsive
design
a box containing items whose sizes can shrink or grow to match the
boundaries of the box Right Ans - flexible box or flexbox
display: flex;
or
display: inline-flex; Right Ans - To define an element as a flexbox,
display: -webkit-box;
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller LeCrae. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $28.49. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
73918 documents were sold in the last 30 days
Founded in 2010, the go-to place to buy study notes for 14 years now