reading-notes

Responsive Web Design

Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop.

With responsive design websites continually and fluidly change based on different factors, such as viewport width, while adaptive websites are built to a group of preset factors. A combination of the two is ideal, providing the perfect formula for functional websites. Which term is used specifically doesn’t make a huge difference.

Mobile means just for mobile users. this is not recommended

Responsive web design is broken down into three main components, including flexible layouts, media queries, and flexible media.

flexible layouts - the practice of building the layout of a website with a flexible grid that will dynamically resize to any width. Most commonly these use percentages or em units. Flexible layouts do not advocate the use of fixed measurement units, such as pixels or inches
media queries - Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation **The mediea queries use the @media rule inside of an existing style sheet, importing a new style sheet using the @import rule, or by linking to a separate style sheet from within the HTML document.

There are 3 logical operators in Media Queries

and - allows an extra condition to be added, making sure that a browser or devices does both a, b, c, and so forth. Multiple individual media queries can be comma separated, acting as an unspoken or operator.
not - negates the query, specifying any query but the one identified.
only - a new operator and is not recognized by user agents using the HTML4 algorithm, thus hiding the styles from devices or browsers that don’t support media queries.

When using the not and only logical operators the media type may be left off. In this case the media type is defaulted to all.

Within responsive design the most commonly used features include min-width and max-width.

The min and max prefixes can be used on quite a few media features. The min prefix indicates a values of greater than or equal to while the max prefix indicates a value of less than or equal to. Using min and max prefixes avoid any conflict with the general HTML syntax, specifically not using the < and > symbols.

orientation - determines if a device is in the landscape or portrait orientation.

The aspect-ratio and device-aspect-ratio features specifies the width/height pixel ratio of the targeted rendering area or output device.

The value for the aspect ratio feature consist of two positive integers separated by a forward slash. The first integer identifies the width in pixels while the second integer identifies the height in pixels.

pixel ratio - identifies high def devices resolution - specifies the resolution of the output device in pixel density

Using the viewport meta tag with either the height or width values will define the height or width of the viewport respectively. Each value accepts either a positive integer or keyword.

For the height property the keyword device-height value is accepted,
for the width property the keyword device-width is accepted ** the keywords inherit the devices height and width

**intitial-scale - should be set to 1 as this defines the ratio between the device height, while in a portrait orientation, and the viewport size. Values for initial-scale should always be a positive integer between 0 and 10.

The minimum-scale and maximum-scale values determine how small and how large a viewport may be scaled. When using minimum-scale the value should be a positive integer lower than or equal to the initial-scale. The maximum - scale should be greater than or equal to the intial-scale. Both must be between 0 and 10