Mejor solución / marco para el diseño receptivo para IE7
Para aquellos que aún no saben sobre diseño receptivo, sugieroeste enlac
Siempre y cuando no entienda las consultas de medios como:
@media screen and (max-width: 1280px) {
h1 { font-size: 120px; padding: 10px; color:#999999 !important; }
h2{font-size:35px;}
}
@media screen and (max-width: 1024px) {
h1 { font-size: 90px; padding: 1px; color:#999 !important; }
h2{font-size:25px;}
}
@media screen and (max-width: 740px) {
h1 { font-size: 70px; padding: 1px; color:#999 !important; }
h2{font-size:16px;}
.left-col { width: 100%; }
.sidebar { width: 100%; }
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 478px) {
h1 { font-size: 50px; padding: 1px; color:#999; }
h2 { font-size: 12px; padding: 1px; }
body { font-size: 13px; }
}
Estaba considerando usar adapt.js que con usted puede hacer:
<script>
// Edit to suit your needs.
var ADAPT_CONFIG = {
// Where is your CSS?
path: 'assets/css/',
// false = Only run once, when page first loads.
// true = Change on window resize and page tilt.
dynamic: true,
// First range entry is the minimum.
// Last range entry is the maximum.
// Separate ranges by "to" keyword.
range: [
'0px to 760px = mobile.min.css',
'760px to 980px = 720.min.css',
'980px to 1280px = 960.min.css',
'1280px to 1600px = 1200.min.css',
'1600px to 1940px = 1560.min.css',
'1940px to 2540px = 1920.min.css',
'2540px = 2520.min.css'
]
};
</script>
<script src="assets/js/adapt.min.js"></script>
Está destinado a ser utilizado con 960 grid Pero aún puedes usar lo que quieras en esos .css
Pero el problema es que necesita habilitar JavaScript. Esperaba que alguno de ustedes conociera una solución más flexible (¡receptiva!), ¿Alguna?