35 lines
623 B
Markdown
35 lines
623 B
Markdown
## Run
|
|
|
|
$ live-server
|
|
$ npm run compile:sass
|
|
|
|
## Bases of responsive design
|
|
|
|
- Use fluid layouts
|
|
- Use `%` instead of `px`, especially in images
|
|
- Use `max-width` instead of `width`, especially in images
|
|
- Use `rem` instead of `px`
|
|
- Use media queries when the rest fails
|
|
|
|
## Fluid Layouts
|
|
|
|
- Float : older way of doing the same job
|
|
- Flexbox : 1 dimensional rows
|
|
- CSS Grid : 2 dimensional grids
|
|
|
|
|
|
## Selectors
|
|
|
|
- Select all the elements that starts with col-
|
|
```css
|
|
[class^='col-'] {
|
|
background-color: red;
|
|
}
|
|
```
|
|
|
|
- Select all the elements that ends with col-
|
|
```css
|
|
[class$='col-'] {
|
|
background-color: red;
|
|
}
|
|
``` |