¿Cómo puedo hacer que css3 responda?

No estoy familiarizado con el diseño web, así que hice todo mi sitio con el diseño simple de css3. No usé el progtwig de arranque, ¿cuál es la manera más fácil de hacer que el sitio responda, gracias?

Puede usar esta consulta de medios en css para una resolución de pantalla específica

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* STYLES GO HERE */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* STYLES GO HERE */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* STYLES GO HERE */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* STYLES GO HERE */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* STYLES GO HERE */ } /* iPhone 5 (portrait & landscape)----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { /* STYLES GO HERE */ } /* iPhone 5 (landscape)----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { /* STYLES GO HERE */ } /* iPhone 5 (portrait)----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { /* STYLES GO HERE */ } 

Algunos consejos :

  • consulta de medios
  • porcentaje en lugar de dimensiones fijas