Responsive Design and Mobile First

Orientar las propiedas de los elementos para adaptarse a dispositivos móviles

Mobile fisrt, primero el móvil

480px - teléfono móvil, 767px - tablet, 950px - pantalla

@media screen and (min-width:950px) { }

Responsive design, nunca se debe ver la barra de desplazamiento horizontal:Los elementos se deben adaptar

Utilizando porcentajes en vez de pixeles se evita la barra horizontal

Con este Meta se evita que el usuario con los dedos pueda aumentar o reducir el tamaño

< meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

• Responsive Luminoso: Que la página cambie de colores de acuerdo a la luz del ambiente con media queries.

• @media (light-level:normal) {
• div#light-level{background-color:green;}
• }
• @media (light-level:dim) {
• div#light-level{background-color:red;}
• }
• light-level: [normal\dim\washad]; Valores que va a poder tomar

• Con JavaScript ya que lo anterior quizás todavía no existe

• Se añade un script para cachar un evento
• <script>
• window.addEventListener('devicelight',
• function(e){
• var lux=e.value;
• document.getElementById("sensor").innerHTML=lux + " lux";
• if (lux<50){
• document.body.className='tenue';
• document.getElementById("modo").innerHTML='Tenue';
• }
• if (lux>=50 && lux<=50){
• document.body.className='normal';
• document.getElementById("modo").innerHTML='Normal';
• }
• if (lux>1500){
• document.body.className='luminoso';
• document.getElementById("modo").innerHTML='Luminoso';
• }
• }
• );
• </script>
• Cuando hay mucha luz, colores claros, menos luz, colores oscuros, para no lastimar la luz