Fala Techs!
Sabemos que nos dias atuais, para criar sites e web apps precisamos semper estar preocupados com os diversos dispositivos e tamanhos de telas.
Muitas Vezes Temos Um Profisional de ui Que faz aquel Mayout maravilhoso para uma tela de 1440px de largura e aí quando vamos construindo o mayout usando as medidas fixas em pixels, fica um pouco estranho ( pra -não dizer muito ) Em telas com Resoluções отличается. E как fontes então? NEM SE FALA.
Vou Descrever aqui uma ideia que tenho usado para -резолюция эссе проблема. ESSEMEM MITAS FORMAS DE FAZER ISSO E AQUI VOU MOSTRAR APENAS MAIS UMA DELAS.
Só Precisamos alinhar alguns conhecimentos previos e canceitos:
- Estou utilizando o Создать-реакт-приложение Para Criar Uma Estrutura Básica do React sem se preocupar com configuração do webpack e afins.
- Suponho Que você saiba o Que é o Reactjs e Стилидированные компоненты Анкет SE Não Souber, Em Uma Pesquisa rápida você encontra todos os canceitos. Embora Eles Sososam Ser Aplicados em CSS Пуро Тамбем.
Макет Ответственный Сан -Акелс Кес Се Аджустам Ао Таманхо да Тела До Усуарио. Эл Нао Мудам А. Посисао Дас Койсас, Simplesmente Ajustam. Макет адаптирует Тамбем Се Аджустам А. Тела, делая Усуарио, Порэм Мюитас Вез, Трокандо А. Посисоао -дос Элемент, Гераламс -Возрождение СМИ запросы Пара адаптарь Ао Таманхо да Тела.
Бора Примечар!
Vamos keyçar criando nosso projeto com к Создать-реакт-приложение . Após Criar O Projeto, Acesse O Diretório Do Projeto E Enstale o Стилизованный Компонент Комо зависит. SE Você Quiser Руководство по конфигурации, SEM USAR O CRA фик vontade. На паста SRC Vamos Deixar Somente os arquivos app.js e index.js. Apague opros arquivos e Lembre-se de Remover as site incias desses arquivos deletados do projeto. Só Pra Gente Ter Uma SelateNcia, Vamos USAR Essa Imagem Como Mayout:
Vamos também supor que o Ui definiu que teremos fontes de tamanhos diferentes para mobile com 24px, планшет com 18px e web com 16px.
Com Essas informações em MãOS, Vamos Seguir Nosso Projeto.
Сбросить CSS E ConfiguraCões Globais.
На паста SRC Vamos Criar Outra Pasta Styles e Dentro da dessa pasta um arquivo chamado global.js (Essa Organizaos Que Costumo USAR EM Projetos Pesoais. SE Quiser USAR DE OUTRA FORMA, SEM Проблемы!). Vamos USAR Aqui O Стилилизированные компоненты Para Criar Um estilo Global. Segue O Código:
import { createGlobalStyle } from "styled-components";
import px2vw from "../utils/px2vw";
export const Global = createGlobalStyle`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
font-size: ${px2vw(24)};
@media (min-width: 768px) {
font-size: ${px2vw(18)};
}
@media (min-width: 1024px) {
font-size: ${px2vw(16)};
}
}
`;
export default Global;
O Que fizemos aqui foi Zerar Algumas Propriedades e defineir o корень Do Html Com O Tamanho Das Fontes Que Vamos USAR.
Соблюдайте Que Importei UMA Funcáo Quemei de PX2VW. Essa Funcáo Converte Pixels Para Ширина просмотра.
Como Nosso Layout será respantivo, preciSo que ele se adapte em todos os tamanhos de tela e por isso vou usar o tamanho da viewport. Poderia ter Pensado Em USAR Процент, MAS O PROPEDA é Que se você depir um pooncetual dentro de um wutro elemento menor Que Queport, ele vai usar o tamanho daquele elemento e neste caso não resolveria o Проблема.
Também vou USAR ESSA FUNCão Para OS Tamanhos de Fonte Pelo Mesmo Motivo: Se os elementos vão se ajustando a tela, как Fontes Também VãO.
Optei Por não Trabalhar Usando Também O Высота видоиспа Porque Tive UM Outro Проблема Desenvolvendo Para Smart TVs Анкет Depois inconto o que foi Анкет
Funcáo px2vw.
Бора Энтао Криар Носса Фунсао. На паста SRC Do Nosso Projeto, Vamos Criar Uma Pasta утилит e Lá Dentro Vamos Criar O Arquivo px2vw.js. Segue O Código Dele:
const px2vw = (size, width = 1440) => `${(size / width) * 100}vw`;
export default px2vw;
Para essa funtusao, já deixei o Valor do width warth de 1440px, mase você pode usar Qualquer wutro ou ainda semper ecepber como Parâmetro da Funcão ou ainda deixando ela Мейс Дженерика.
Criando A Página do Projeto.
Vamos Agora Criar Uma Página para exibir nosso. Dentro da pasta SRC Вамос Криар Ума Паста Чамада страницы E Dentro Dela Vamos Criar Outra Pasta Chamada Главная Анкет Dentro Dessa Pasta Главная Вамос Криар Доис Аркивос. SOU SEARAR COMPONENTES DE ESTILO E COMPONENTES DE Lógica.
Vamos Criar Então os arquivos Home.js е – Homestyles.js .
Homestyles.js:
import styled from "styled-components";
import px2vw from "../../utils/px2vw";
export const Container = styled.div`
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: ${px2vw(32)};
max-width: 100%;
@media (min-width: 1024px) {
flex-wrap: nowrap;
}
`;
export const Box = styled.div`
display: flex;
width: ${px2vw(320, 320)};
min-height: ${px2vw(200, 320)};
flex-direction: column;
padding: ${px2vw(20)};
margin: ${px2vw(20)};
background-color: ${props => props.bgColor};
height: 100%;
@media (min-width: 768px) {
width: ${px2vw(320, 768)};
min-height: ${px2vw(200, 768)};
height: 100%;
}
@media (min-width: 1024px) {
width: ${px2vw(500)};
min-height: ${px2vw(300)};
height: 100%;
}
`;
export const BoxTitle = styled.h3`
color: #333;
font-size: 2rem;
text-align: center;
@media (min-width: 1024px) {
font-size: 1.5rem;
}
`;
export const BoxText = styled.p`
margin-top: ${px2vw(20)};
color: #666;
font-size: 1.5rem;
@media (min-width: 1024px) {
font-size: 1rem;
}
`;
Construtiamos a estilização do nosso componente. Adicionei estilos de texto pra gente ver como se comporta quando o tamanho da fonte é alterado.
Quando Chamo A Funcão px2vw para um wutro tamanho de tela, passo esse tamanho como parâmetro. Min-Height: $ {px2vw (200, 320)};
ИСПОЛЬЗОВАНИЕ ТАБЕМ СМИ запросы Para Fazer Nosso Layout Ser, Alem de Ответственный Ser Também адаптация , OU Seja, Depertondo do Tamanho da tela в качестве “Caixas” vão se ajustando conforme o layout de exemplo.
Пара када Коробка Passei Também UMA Propriedade Bgcolor Para Controlar A Cor de Cada Box.
Agora Vamos ao nosso Home.js :
import React from "react";
import { Container, Box, BoxTitle, BoxText } from "./HomeStyles";
export default function Home({ boxData }) {
return (
{boxData.map(box => (
{box.title}
{box.text}
))}
);
}
E Agora é sou ajustar nosso componente app.js para importar nosso mayout:
import React from "react";
import Global from "./styles/global";
import Home from "./pages/Home/Home";
const lorem =
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, sed iure blanditiis voluptatum nulla quidem minus quam tempora obcaecati necessitatibus inventore! Vitae totam quam pariatur facilis fugit maxime adipisci eaque.";
const data = [
{
id: Math.random(),
title: "Box titulo 1",
text: lorem,
bgColor: "#D5CAFA"
},
{
id: Math.random(),
title: "Box titulo 2",
text: lorem,
bgColor: "#EDA9A9"
},
{
id: Math.random(),
title: "Box titulo 3",
text: lorem,
bgColor: "#F2EE8D"
},
{
id: Math.random(),
title: "Box titulo 4",
text: lorem,
bgColor: "#9FEACD"
}
];
function App() {
return (
<>
Пронтинью! Agora é Sou dar um NPM запустить начало ОУ пряжа старт E Ver o Resultado RedimensionAndo Tela. Veja:
Esta é apenas mais uma das formas Que que ocê pode criar seus mayouts Fluidos Com Apponsividade e Adaptabilidade.
Se gostou deste texto ou até mesmo tenha um crítica ou suestão, deixe nos comentários. É Muito Важно, чтобы преуспеть в том, что я desenvolvendo e aprendendo. O código está disponível no github, basta clicar Акми . Я adicionem também no LinkedIn E Bora Trocar Ideia!
** английская версия здесь
Оригинал: “https://dev.to/carloscne/criando-paginas-responsivas-e-adaptativas-com-react-e-styled-components-1gje”