Reading notes for Code Fellows!
____ _ ____ is the practice 0f building a website suitable to work on every device and every screen size.
Responsive websites continually and fluidly change based on different factors, such as viewport width, while **____** websites are built to a group of preset factors.
__, on the other hand, generally means to build a separate website commonly on a new domain solely for mobile users.
Currently, the most popular technique lies within responsive web design, favoring design that ____ adapts to different browser and device viewports.
Responsive web design is broken down into three main components, including flexible layouts, media queries, and flexible media.
Flexible layouts is the practice of building the layout of a website with a flexible ____, capable of dynamically resizing to any width.
CSS3 introduced some new relative length units:
vw - viewports widthvh - viewports heightvmin - minimum of the viewport’s height and widthvmax - maximum of the viewport’s height and widthThe formula for identifying the relative width of a an element is based on dividing the target width of an ____ by the width of its parent ____.
Using the __ __ formula, we can convert all fixed units of length to relative units, so that no matter how wide the parent container is the contained element will scale __.
When the layout gets too small, or too large, text may become illegible and the layout may begin to break. In this event the flexible layout approach alone won’t be enough, but __ __ can be used to help build a better experience.
Two ways to use media queries are by importing a new style sheet using the __ rule or by using the __ rule inside of an existing style sheet, which is the generally recommended method.
Each media query may include a media type followed by one or more expressions. When a media feature and value allocate to __, the styles are applied. If the media feature and value allocate to ____ the styles are ignored.
There are three different __ operators available for use within media queries: and, not and only. Using these we can build powerful expressions.
Using the and operator allows an extra condition to be added…
@media all and (min-width: 800px) and (max-width: 1024px) {...}
The not operator negates the query, specifying any query but the one identified.
@media not screen and (color) {...}
The only operator is a new operator that isn’t recognized by HTML4. Styles including this operator are hidden from devices/browsers that do not support media queries
@media only screen and (orientation: portrait) {...}
Media ____ identify what attributes or properties will be targeted within the media query expression.
One of the most common media features revolves around determining a __ or __ for a device or browser viewport. Their values may be any length unit, relative or absolute.
In responsive design, min-width and max-width are the most commonly used features. They help build ____ websites on desktops and __ __ equally.
The orientation media feature determines if a device is in the ____ mode (the display is wider than taller) or the ____ mode (where the display is taller than wider). This media feature plays a large part with mobile devices.
The ____-____ feature consists of two positive integers separated by a forward slash. The first identifies the ____ in pixels and the second identifies the ____ in pixels.
@media all and (min-device-aspect-ratio: 16/9) {...}
Other media features include:
pixel-ratio media featuresresolution media featurescolormonochromecolor-indexgridscanWriting media query breakpoints around common viewport sizes such as 320px, 480px, 768px, 1024px and so forth is a ____ idea. New devices and resolutions are being introduced all the time.
The __ ____ approach includes using styles targeted at smaller viewports as the default styles for a website, then use media queries to add style as the viewport grows. This saves bandwidth.
Downloading unnecessary media assets like shadows, gradients, transforms and animations in mobile styles can _ loading and ____ battery life. Media queries can be used to stop these.
Using the viewport meta tag with either the height or width values will define the height or width of the viewport. For best results, it is recommended that we use the device-height and device-width values to inherit the device’s __ and __.
<meta name="viewport" content="width=device-width">
The __-scale and __-scale values determine how small and how large a viewport may be scaled.
Turning off the ability to scale a website is a ____ idea.
The viewport meta tag will accept ____ values as well as ____ values, allowing several properties to be set at once.
Images, videos and other media types need to be ____, changing their size as the size of the viewport changes.
A quick way to make media scalable is by using the __ property with a value of 100%, ensuring that as the viewport gets smaller, any media will scale down according to its container’s width.
The max-width property doesn’t work well for all instances of media, specifically around ____ and embedded media. (see Responsive Web Design for a work around).
Float is a CSS positioning ____.
Floated elements remain a part of the flow of the web page. Which is distinctly different from page elements that us ____ positioning.
There are four valid values for the float property:
Floats can be used to create entire web layouts, but stronger tools are ____ and ____.
___ are still useful because they still have abilities unique to them.
Float’s sister property is ____.
An element that has the clear property on it will not move up adjacent to the ___ element, but will move itself down below it.
clear has four valid values:
If a parent element contains nothing but floated elements, the ____ of it would literally collapse to nothing.
Collapsing almost always needs to be dealt withto prevent strange layout problems. We fix it by clearing the float ____ the floated elements in the container but ____ the close of the container.
The Empty Div Method is quite literally an empty div
<div style="clear: both;"></div>
The Overflow Method relies on setting the overflow CSS property on a parent element causing the parent to expand to contain the floats if set to __ or __.
The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Instead of setting overflow on the parent, we apply an additional class like “clearfix” to it and then apply CSS:
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
____ scenarios call for ____ float clearing methods.
overflow: hidden; to cut off excessdisplay: inline; on the floatIf you need text wrapping around images, there really aren’t any alternatives for ____.