https://github.com/alphalawless/responsiveness-training
Responsiveness training repository. By Mayk Brito 👨🏫
https://github.com/alphalawless/responsiveness-training
responsive rocketseat training
Last synced: 2 months ago
JSON representation
Responsiveness training repository. By Mayk Brito 👨🏫
- Host: GitHub
- URL: https://github.com/alphalawless/responsiveness-training
- Owner: AlphaLawless
- Created: 2021-04-26T00:35:51.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-01T14:52:19.000Z (over 3 years ago)
- Last Synced: 2025-01-17T22:44:43.920Z (4 months ago)
- Topics: responsive, rocketseat, training
- Language: CSS
- Homepage:
- Size: 33.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Languages
* [en-US](#Responsiveness)
* [pt-BR](#Responsividade)
# 📱Responsiveness
This repository was made for I train responsinevess concepts, and study into practice responsiveness. All the material here was made with assistance, and with the materials available in the rocketseat-content repository [link](https://github.com/rocketseat-content/youtube-masterclass-responsividade).
## CSS Units
CSS unit of measure.
**Fixed Layout:**
* `px` - Pixels
**Fluid Layout:**
* `%` - Percentage Usage (0% - 100%)
* `auto` - Automatic Balancing
* `vh` - Viewport Height (Y) (0vh - 100vh)
* `vw` - Viewport Width (X) (0vw - 100vw)
**Fixed Text:**
* 1px = 0.75pt
* 16px = 12pt
**Fluid Text:**
* `em` - multiplied for father
* `rem` - multiplied for root
**OBS: These properties do not apply only to texts.**
## CSS Media Queries
```css
@media (max-width: 320px) {
#form h3 {
font-size: 2rem;
}
}
```
## HTML Media Attrib.
```html
```
## Images
`` and ``
```html
```
* Always use the SVG format for creating responsive websites, as it supports changing the image with good resolution.
# 📱Responsividade
Esse repositório foi feito para eu treinar conceitos de responsivdade, e estudar mesmo na prática responsividade. Todo o matérial aqui foi feito com auxílio, e com os materiais disponíveis do repositório da rocketseat-content [link](https://github.com/rocketseat-content/youtube-masterclass-responsividade).
## CSS Units
Unidades de medida do CSS.
**Layout Fixo:**
* `px` - Pixels
**Layout Fluido:**
* `%` - Uso da Porcentagem (0% - 100%)
* `auto` - Balanceamento Automático
* `vh` - Viewport Height (Y) (0vh - 100vh)
* `vw` - Viewport Width (X) (0vw - 100vw)
**Textos Fixos:**
* 1px = 0.75pt
* 16px = 12pt
**Textos Fluidos:**
* `em` - multiplicado pelo pai
* `rem` - multiplicado pelo root
**OBS: Essas propriedades não se aplicam somente em textos.**
## CSS Media Queries
```css
@media (max-width: 320px) {
#form h3 {
font-size: 2rem;
}
}
```
## HTML Media Attrib.
```html
```
## Imagens
`` e ``
```html
```
* Utilize sempre o formato SVG para criação de sites responsivos, pois ele suporta a alteração da imagem com boa resolução.