Hojas de estilo simples vs múltiples en el diseño web responsivo
En resumen:
¿ Debe usar una o varias hojas de estilo al hacer diseño web responsivo?
En detalle:
En responsive design, tiendes a tener un fragmento principal de CSS, luego otros bits y piezas para ajustar el diseño cuando alcanza ciertos puntos de interrupción. Puedes estructurar tu código de dos maneras:
Hoja de estilo simple
/* Main CSS */
@media only screen and (min-width: 480px) { /* CSS */ }
@media only screen and (min-width: 640px) { /* CSS */ }
@media only screen and (min-width: 800px) { /* CSS */ }
Múltiples hojas de estilo
<link rel="stylesheet" media="screen" href="main.css">
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="480.css">
<link rel="stylesheet" media="only screen and (min-width: 640px)" href="640.css">
<link rel="stylesheet" media="only screen and (min-width: 800px)" href="800.css">
Parece que el uso de uno stylesheet reducirá el número de solicitudes HTTP, pero tendrá un archivo más grande que contendrá código que podría no ser utilizado por algunos clientes. Varias hojas de estilo parecen mantener bajos los tamaños de archivo, pero luego tiene más solicitudes HTTP.
¿Cuándo debe optar por cada enfoque? ¿Cómo se acumulan los pros y los contras del número de solicitudes HTTP y el tamaño del archivo en la práctica?
1 answers
Las hojas de estilo son siempre descargadas, independientemente del medio actual, ya sea screen, print, o 3D-glasses.
Así que con eso en mente, mantenerlos todos en una hoja de estilos reducirá las solicitudes http, donde como hojas de estilos separadas siempre crearán más solicitudes sin ningún beneficio.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:46:08