section,
aside {
margin: 1.858736059%; /* 10px ÷ 538px = .018587361 */
}
section {
float: left;
width: 63.197026%; /* 340px ÷ 538px = .63197026 */
}
aside {
float: right;
width: 29.3680297%; /* 158px ÷ 538px = .293680297 */
}
/* @import Rule */ @import url(styles.css) all and (max-width: 1024px) {…}
- linking to a seperate style sheet in the html document
#### Common Media Types
- all
- screen
- print
- tv
- braille
#### Logical Operators in Media Queries
- 3 different logical operators
- and logical operator allows an extra condition to be added
```
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">
```
- not logical operator negates the query, specifying any query but the one identified
```
@media not screen and (color) {...}
```
- only logical operator selects only screens in portrait with user agent capable of rending media queries
```
@media only screen and (orientation: portrait) {...}
```
#### Media Features in Media Queries
- Identify what attributes or properties will be targeted within expression
- Height
- min
- max
- Width
- min
- max
@media all and (min-width: 320px) and (max-width: 780px) {…}
#### Orientation Media Feature
- landscape
- portrait
@media all and (orientation: landscape) {…}
#### Aspect Ratio Media Features
- specifies width/height pixel ratio
- aspect-ratio
- device-aspect-ratio
@media all and (min-device-aspect-ratio: 16/9) {…}
#### Resolution Media Feature
- specifies resolution of output device in pixel density, dots per inch or DPO
@media print and (min-resolution: 300dpi) {…}
#### Other Media Features
- color
- color-index
- monochrome
- grid
- scan
### Mobile First
- Use smaller viewport styles as default for website, then use media queries as it grows
- smaller viewport shouldnt have to load styles for desktop
- saves bandwith
- constraints of mobile user in mind
/* Default styles first then media queries */ @media screen and (min-width: 400px) {…} @media screen and (min-width: 600px) {…} @media screen and (min-width: 1000px) {…} @media screen and (min-width: 1400px) {…}
#### Viewport
- invented by apple
- height
- device-height
- width
- device-width
- scale
- initial-scale
- user-scalable
- minimum-scale
- maximum-scale
- Viewport Resolution
- target-densitydpi
- device-dpi
- high-dpi
- medium-dpi
- low-dpi
- dpi number
### Flexible Media
- media size changes with viewport
- max-width
img, video, canvas { max-width: 100%; }
- Flexible Embedded Media
- absolutely positioned inside parent
HTML
CSS figure { height: 0; padding-bottom: 56.25%; /* 16:9 */ position: relative; width: 100%; } iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } ```
:after