truncar - ¿Por qué mi CSS receptivo no está tomando ancho de medios?
truncar texto css (3)
Como dice el título, no puedo configurar el CSS específico para el ancho de la pantalla multimedia para mi página web PHP.
Aquí está mi sección <head> de mi index.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo SITENAME; ?> - <?php echo SITEDESC; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0; minimumscale=1.0, maximum-scale=1.0; user-scalable=0;" /> <!-- for responsive coding, the "Viewport" meta tag -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type=''text/javascript'' src=''scripts/respond.min.js''></script> <!-- for responsive mobile themes -->
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
Para mi elemento HTML <header> ... </header> , en mi CSS (en style.css ), especifiqué:
header{
background: #1e5799;
min-height: 40px;
max-height: 136px;
}
Pero al usar el tamaño de la barra de herramientas "Web Developer" Resize » Ver diseños receptivos, se observa una caída en los diferentes diseños de ancho de dispositivo.
Por ejemplo:
En mi etiqueta <header> , los elementos internos se están saliendo, por lo que necesito aumentar la altura del encabezado. Así que especifiqué en style.css :
/* Media Queries for Different Types of Mobile Devices */
/* Mobile portrait (320 x 480) */
@media all and (max-device-width: 320px) {
header{
height: 136px !important;
background-color: #FF0000;
}
}
Pero no está funcionando. :(
¿Qué me estoy perdiendo sobre CSS receptivo?
EDITAR
Después de las primeras 2 respuestas, con sus sugerencias, traté de usar:
@media screen and (max-width: 320px) {
header{
height: 136px !important;
background-color: #FF0000;
}
}
Y sí, puse mi CSS multimedia en la parte inferior de style.css .
También traté de separar el mobile.css como:
<link type="text/css" rel="stylesheet" media="screen and (max-device-width: 480px)" href="css/mobile.css" />
Donde intenté colocar el siguiente código:
header{
height: 130px;
}
Todavía no está funcionando.
Además de las otras buenas sugerencias, si revisa el estilo del encabezado completo que tiene
header{
background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of ''filter'' to ''none'' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzU0NzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #1e5799 0%, #135471 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#135471)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#135471 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#135471 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#135471 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#135471 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#1e5799'', endColorstr=''#135471'',GradientType=0 ); /* IE6-8 */
/*border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
-o-border-radius: 8px 8px 0 0;
*/
min-height: 40px;
max-height: 136px;
}
Por lo tanto, para la ventana gráfica de 320 px, además de escribir una nueva orientación para la altura y el color de fondo, debe anular la imagen de fondo y el filtro de IE.
Para eliminar el filtro IE, algo así como
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
debería ser bueno Probablemente puedas descubrir el gradiente de fondo.
¡Buena suerte!
Durante el desarrollo, el max-device-width no le ayudará a visualizar los cambios en el tamaño de la ventana, ya que esta consulta de medios particular apunta al tamaño real del dispositivo (que, en su computadora, sería su monitor, no la ventana del navegador).
Por otro lado, max-width dirige al max-width la ventana del navegador, por lo que funciona perfectamente al redimensionar.
A menos que desee apuntar a dispositivos específicamente más pequeños (y no ser sensible al cambio de tamaño de la ventana), le sugiero que opte por max-width .
Verifique http://codepen.io/anon/pen/iFCHj normalmente max-width lugar del max-width max-device-width medida que obtiene un diseño receptivo en todos los dispositivos.
Además, asegúrese de que su diseño receptivo se encuentre debajo del diseño principal o que el navegador ignorará los medios a menos que se establezca un elemento importante para todos.