He usado Zurb Foundation and Skeleton antes, así que estoy familiarizado con ambos, pero nunca antes tuve que convertir un sitio web existente en un sitio web receptivo. ¿Cuál es el método más rápido para convertir mi sitio web? ¿Utiliza un marco como el anterior o agrega consultas de medios para el código ya proporcionado? (¿Eso incluso trabajar?)¿La forma más rápida de hacer que el sitio web sea receptivo?
determinar los dispositivos que desea apoyar y luego agregar una hoja de estilo con algo en este sentido:
/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
/* Smaller Resolution Desktops and Laptops */
[...]
}
@media (max-width: 650px) {
/* Smaller devices */
[...]
}
@media (max-width: 450px) {
/* Even Smaller devices */
[...]
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* Even Smaller devices */
[...]
}
Es más fácil de probar si van en orden descendente. más consultas de ejemplo los medios de comunicación aquí:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
gracias! Hacerlo así sería la forma más fácil de hacer que el sitio web responda –
Sí, porque puede agregarlo a una hoja de estilo existente y comenzar a hacer anulaciones inmediatamente. –
¿Hiciste esto Joe? ¿Cuáles fueron tus resultados? Estoy a punto de hacer lo mismo en el sitio web de un cliente y estoy tratando de decidir si recomendarán que reconstruyan su CSS desde cero (que es un proyecto bastante grande), o lo harán de esta manera. – vrutberg
En mi caso tengo que volver a escribir la página web desde cero porque mi archivo de estilo de respuesta ni de resolver el problema .. Así que vuelven a escribir mis Estilos usando LESS y el I crean una hoja de estilo receptiva con las consultas de medios correctas como Matthew Darnell do.
No estoy familiarizado con Skeleton pero Twitter Boostrap funciona bien para mí.
Si está dispuesto a hacer un poco de trabajo mental y la migración, hay una manera de instalar la base en un proyecto actualmente existente (específicamente proyectos de brújula).
Primero necesita tener una brújula instalada y convertir el proyecto en un proyecto de brújula. Una forma fácil de hacerlo es a través del kit de código y simplemente arrastrando y soltando su carpeta de proyecto en el kit de código. Puede obtener algunos consejos de terminal a través de esta página en el sitio web de la fundación.
http://foundation.zurb.com/docs/sass.html
Usted sería entonces necesario abrir el terminal y escriba
cd /path-to-your-project-folder/
continuación, escriba
compass install -r zurb-foundation foundation
Usted puede tratar de utilizar la fundación solo en una aplicación existente utilizando completamente Sass (sin brújula) pero tendrías que descargar la base desde el sitio de git e incluir el scss uno por uno. Puede encontrar información en la página que he enumerado arriba.
Responsive a what? ¿Estás hablando del rendimiento del sitio web? Hace referencia a consultas de medios que tratan sobre algo diferente. Creo que confundimos ¿De qué se trata realmente tu pregunta? – jfriend00
@ jfriend00, el término "receptivo" en diseño web (y específicamente "diseño receptivo" según las etiquetas de la pregunta) hace referencia a sitios web que ajustan dinámicamente su diseño, utilizando consultas de medios CSS para cualquier tamaño de pantalla en el que se encuentren. –