Adaptar nuestra web a cualquier dispositivo con css media screen

Hoy en día es un verdadero reto para los desarrolladores y diseñadores web el diseño adaptable , ya que se han presentado infinidades de dispositivos ejm, tablets, smartphones, laptos, monitores de varios tamaños. Que pone en reto ante el diseñador de como presentar información mediante pantalla ..

Hoy en día se nos presenta una oportunidad con css para hacer responsive o adaptable vuestras webs .

Con la propiedad media screen de css lograremos que el diseño web se adapte a cualquier pantalla con la que el usuario visite su web aquí les dejo el codigo fuente para que lo usen a su conveniencia..

Espero les sirva en algún proyecto…

@media screen and (min-width: 200px) {
	.pagina {
	width: 200px;
	margin-right: auto;
	margin-left: auto;
	background-color: #000;
	height: 400px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFF;
}
}
@media screen and (min-width: 600px) {
	.pagina {
	width: 600px;
	margin-right: auto;
	margin-left: auto;
	background-color: #0F9;
	height: 400px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFF;
}
}
@media screen and (min-width: 960px) {
	.pagina {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	background-color: #09F;
	height: 400px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFF;
}
}

Demostracion

Relacionado