¿Ha encontrado una situación en la que el texto y los bloques que encajan perfectamente en el diseño de Photoshop por alguna razón obstinadamente no quieren obedecer en el diseño, no encajan en el ancho especificado por el diseño? Al mismo tiempo, tanto el diseñador como el diseñador de diseño usan la misma cuadrícula, por ejemplo, la cuadrícula Bootstrap 3.
Después de revisar un número significativo de sitios, llegué a la conclusión de que, en medio de los diseñadores y diseñadores de diseño, apareció un error común.
La cuadrícula bootstrap, como un ejemplo de cuadrícula común, configura un diseño de 12 columnas, que en pantallas de 1200px o más de ancho tiene dimensiones entre columnas de 30px y márgenes laterales de contenido de 15px a izquierda y derecha. Teniendo en cuenta que el ancho de las columnas lo establece el diseñador en píxeles y el diseñador de diseño como un porcentaje, el error que se describe a continuación no se nota de inmediato.
¿Cómo trabaja un diseñador con una cuadrícula? Por lo general, esta cuadrícula es generada por algún servicio, descargada e instalada en Photoshop. ¿Cómo funciona el diseñador de diseño con la cuadrícula? La malla se toma del marco Bootstrap 3.
Entonces, ¿cuál es el problema si las dimensiones de la cuadrícula (columnas e intervalos) son las mismas?
La esencia del problema radica en la conveniente propiedad CSS "box-sizing" con el valor "border-box", que se establece de forma predeterminada en bootstrap. Debido a esto, el diseñador considera el ancho de los márgenes laterales además del ancho del contenido (1170 píxeles más los márgenes laterales de 15 píxeles a la derecha y a la izquierda), y el diseñador del diseño, sin saberlo, los incluye en el ancho del contenido (1170 píxeles, incluidos los márgenes laterales de 15 píxeles, es decir El ancho del contenido es de 1140 px). Por lo tanto, resulta que en el proyecto en diferentes etapas se utilizan dos cuadrículas diferentes y el diseñador de diseño tiene una más estrecha.
Este error también se produce cuando se utilizan cuadrículas distintas de Bootstrap. Aparentemente, nació con el advenimiento de la "caja fronteriza".
La solución es simple: ajuste el tamaño del contenedor: "container {width: 1200px;}" (1170px - contenido más sangrías de 15px a derecha e izquierda). También es necesario realizar el ajuste apropiado del contenedor por la cantidad de espacio lateral para pantallas de otras resoluciones.
Me parece que no tiene sentido discutir sobre quién es responsable de corregir el error. Es una buena forma para que el diseñador aclare esta pregunta con el diseñador de diseño, y el diseñador de diseño debe recordar esta característica de usar el "cuadro de borde" para la cuadrícula. Las correcciones de errores en un marco generalizado también aumentarán el número de sitios que coinciden estrictamente con el diseño.