Recientemente, estoy trabajando en un proyecto. El jefe espera que nuestros productos puedan tener una buena experiencia de usuario en diferentes dispositivos y, al mismo tiempo, para ahorrar costos de mano de obra, espera utilizar el mismo conjunto de código para adaptar estilos a diferentes tamaños de pantalla. Debido a que elegí tailwindcss como marco CSS, me pregunté si podría crear una solución de diseño adaptativo multiterminal basada en tailwindcss. Después de investigar un poco, descubrí que la configuración del punto de interrupción receptivo de tailwindcss es muy flexible y puede satisfacer nuestras necesidades. El uso de la clase de herramienta de punto de interrupción puede evitar escribir una gran cantidad de CSS de consultas de medios, y es muy conveniente usarlo. A continuación, presentaré cómo creé una solución de diseño adaptativo multiterminal basada en tailwindcss.
Configuración de punto de interrupción responsivo
Los siguientes son los 5 puntos de interrupción predeterminados de tailwindcss:
| prefijo de punto de interrupción |
ancho |
CSS |
| sm |
640px |
@media (ancho mínimo: 640 px) {...} |
| Maryland |
768px |
@media (ancho mínimo: 768 px) {...} |
| LG |
1024px |
@media (ancho mínimo: 1024 px) {...} |
| SG |
1280px |
@media (ancho mínimo: 1280 px) {...} |
| 2xl |
1536px |
@media (ancho mínimo: 1536 px) {...} |
tailwindcss adopta la estrategia Mobile First, es decir, las clases de herramientas sin prefijos están dirigidas a pantallas pequeñas y las clases de herramientas con prefijos están dirigidas a pantallas grandes. Por ejemplo, text-center es para pantallas pequeñas y md:text-center es para pantallas grandes. Debido a que el tamaño de la pantalla del primer punto de interrupción de tailwindcss es 640 px, pero de hecho el ancho de pantalla más grande del teléfono móvil es de solo 480 px, por lo que si tiene algún diseño especial para teléfonos móviles, puede considerar agregar un punto de interrupción:
js复制代码// tailwind.config.js
module.exports = {
...,// 其他配置
theme: {
screens: {
xs: '480px',
...defaultTheme.screens,
},
},
}
Con respecto a los puntos de interrupción anteriores, el diseñador y yo llegamos a un acuerdo después de una discusión: para cada página, el diseñador generalmente produce al menos 3 conjuntos de diseños de diseño, que se aplican a teléfonos móviles, tabletas y PC. Consideramos tamaños de pantalla inferiores a 480 px como teléfonos móviles, de 480 px a 1024 px como tabletas y de 1024 px a 1280 px como un área mixta entre tamaños de pad grandes y pantallas de portátiles pequeñas. Cualquier tamaño superior a 1280 px es para PC. Los diseñadores pueden optar por realizar cambios de diseño en cualquier punto de interrupción para controlar el efecto de diseño adaptable con un control detallado.
Diseño general de la página
El plano de distribución proporcionado por el diseñador es el siguiente:
Teléfono móvil y pad: diseño superior, medio e inferior, altura fija en la parte superior e inferior, adaptable en el medio
Lado de la PC: diseño izquierdo y derecho, ancho fijo a la izquierda, adaptable a la derecha
El efecto es el siguiente:
Para lograr este efecto, debemos utilizar este esquema de diseño desde el principio:
En el lado móvil, ocultamos la barra lateral (Sider) y solo mostramos el área de contenido principal (Content). En el lado de la PC, ocultamos el encabezado y el pie de página y mostramos el Sider. El pseudocódigo es el siguiente:
jsx复制代码<Layout>
<Header className="lg:hidden"></Header>
<Layout>
<Sider className="hidden lg:block" />
<Content></Content>
</Layout>
<Footer className="lg:hidden"></Footer>
</Layout>
Utilice flex para realizar ajustes de diseño locales
Una vez finalizado el marco de diseño, se producen cambios de diseño locales. Un cambio común es que después de un cierto punto de interrupción, el diseño horizontal original debe cambiarse a un diseño vertical, o viceversa. Como se muestra abajo:
En este momento, podemos usar el diseño flexible para lograr esto. Puedes hacerlo:
jsx复制代码<div className="flex flex-col md:flex-row">
<div className=" md:flex-1"></div>
<div className=" md:flex-1"></div>
</div>
Utilice grid/flex para la adaptación de la lista horizontal
En algunos escenarios necesitamos implementar la adaptación de listas horizontales, los requisitos son los siguientes:
- El número de elementos de la lista es variable y admite la disposición de varias líneas.
- Bajo diferentes puntos de interrupción, la misma fila muestra un número diferente de columnas
- Bajo el mismo punto de interrupción, el ancho de la lista es adaptable
Como se muestra abajo:
Esto se puede lograr usando flex+porcentaje:
jsx复制代码<div className="flex flex-wrap px-2">
{items.map((item) => (
<div className="shrink-0 max-w-1/2 basis-1/2 sm:max-w-1/3 sm:basis-1/3 lg:max-w-1/4 lg:basis-1/4 ..."></div>
))}
</div>
Además, también puedes utilizar el diseño de cuadrícula para lograr:
jsx复制代码<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 ...">
{items.map((item) => (
<div></div>
))}
</div>
js obtiene el estado del diseño
En algunos casos, es posible que necesitemos obtener el punto de interrupción actual y la situación del diseño en la devolución de llamada del evento. Por ejemplo, necesitamos obtener la situación del diseño actual después de hacer clic en un botón y luego realizar algún procesamiento en función de la situación del diseño.
js复制代码const handleClick = () => {
if (window.innerWidth < 480) {
// do something for mobile
} else if (window.innerWidth < 1024) {
// do something for pad
} else {
// do something for pc
}
};
480 y 1024 son nuestros propios puntos de interrupción definidos, que se pueden guardar como constantes y son consistentes con los puntos de interrupción de tailwindcss.
Pero hay un problema con este método, es decir, cuando ajustamos el tamaño de la ventana en el navegador, los puntos de interrupción y las condiciones de diseño cambiarán. Cuando se ejecuta js, es posible que ya no sean nuestros puntos de interrupción y condiciones de diseño actuales.
Los posibles escenarios son que el pad gire la pantalla y el tamaño de la ventana del navegador se ajuste durante el proceso de desarrollo para simular dispositivos en diferentes extremos. En este momento, necesitamos volver a adquirir los puntos de interrupción y el diseño actuales cuando cambia el tamaño de la ventana.
Podemos implementar un proveedor de contexto para proporcionar el ancho de la pantalla actual y la información del punto de interrupción, y luego actualizar esta información cuando cambie el tamaño de la ventana.
jsx复制代码import React, { createContext, useState, useEffect } from "react";
const ScreenContext = createContext();
const ScreenProvider = ({ children }) => {
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
const [screenBreakpoint, setScreenBreakpoint] = useState("");
useEffect(() => {
const handleResize = () => {
setScreenWidth(window.innerWidth);
if(window.innerWidth >= 1536) {
setScreenBreakpoint("2xl")
} else if(window.innerWidth >= 1280) {
setScreenBreakpoint("xl")
} else if(window.innerWidth >= 1024) {
setScreenBreakpoint("lg")
} else if(window.innerWidth >= 768) {
setScreenBreakpoint("md")
} else if(window.innerWidth >= 640) {
setScreenBreakpoint("sm")
} else if(window.innerWidth >= 480)) {
setScreenBreakpoint("xs")
}else{
setScreenBreakpoint("")
}
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return (
<ScreenContext.Provider value={
{ screenWidth, screenBreakpoint }}>
{children}
</ScreenContext.Provider>
);
};
const useScreen = () => {
const { screenWidth, screenBreakpoint } = useContext(ScreenContext);
return { screenWidth, screenBreakpoint };
};
export { ScreenContext, ScreenProvider, useScreen };
De esta manera, podemos obtener el ancho de pantalla actual y la información del punto de interrupción a través del gancho useScreen en cualquier componente.
Pero hay una pequeña desventaja de esta solución: mantenemos dos piezas de información de punto de interrupción, respectivamente en tailwind.config.js y ScreenProvider. Si modificamos la información de punto de interrupción en tailwind.config.js, entonces en ScreenProvider La información de punto de interrupción también debe modificarse en consecuencia.
Precauciones
- Diseño interactivo
- En el caso de una pantalla grande, la página tiene suficiente espacio para acomodar elementos, sin embargo, al adaptarse al teléfono móvil, algunas áreas no tienen espacio para mostrarse, generalmente se utiliza un cuadro emergente para mostrar el área oculta.
- Acerca del desplazamiento
- El efecto de desplazamiento solo debe aplicarse en el lado de la PC, porque al hacer clic en el teléfono móvil se activará el efecto de desplazamiento y debe hacer clic en otro lugar para cancelar el efecto de desplazamiento. Por lo tanto, si queremos implementar un efecto de desplazamiento en la PC, hay No habrá efecto de desplazamiento en el botón del teléfono móvil, puedes hacer esto:
- jsxCopiar código
- <botón className=" lg:hover:bg-blue-500"></button>
- división de código
- En la mayoría de los casos, un usuario solo verá la página bajo un determinado punto de interrupción, por lo que podemos decidir qué componentes cargar en función del punto de interrupción actual, lo que puede reducir la carga de código innecesario, reducir el volumen de js y mejorar la velocidad de carga de la página. Por ejemplo, si el componente de la barra de navegación lateral en nuestro Sider solo se muestra después del punto de interrupción lg, entonces podemos hacer esto:
- jsxCopiar código
- const SiderMenu = React.lazy(() => importar("./SiderMenu")); const Aplicación = () => { const { screenBreakpoint } = useScreen(); return ( <Diseño> <Encabezado className="lg:hidden"></Header> <Diseño> <Sider className="hidden lg:block"> {["lg", "xl", "2xl"].includes( screenBreakpoint) && ( <Suspense fallback={null}> <SiderMenu /> </Suspense> )} </Sider> <Content>...</Content> </Layout> <Footer className="lg:hidden"> </Pie> </Layout> ); };
Resumir
La solución de diseño adaptativo multiterminal basada en tailwindcss nos permite adaptar estilos a diferentes tamaños de pantalla en el mismo conjunto de código, lo que puede reducir en gran medida nuestros costos de desarrollo. Sin embargo, esto requiere que los desarrolladores y diseñadores de aplicaciones para el usuario trabajen juntos: los diseñadores deben proporcionar diseños de diseño bajo diferentes puntos de interrupción, y los desarrolladores de aplicaciones para el usuario deben implementar diseños bajo diferentes puntos de interrupción según el borrador del diseño. De esta forma, podemos implementar un conjunto de códigos y una solución de diseño adaptativo multiterminal.