Cambiar un css según si es movil u ordenador
2016-11-13 19:31:09
Para modificar el comportamiento de elementos de las páginas web dependiendo, por ejemplo, del tamaño de la pantalla, por ejemplo, para mostrar cositas más grandes en las pantallicas de movil o más pequeñas en vuestro flamante monitor Spectravideo Ics de 27 pulgadas con entradas displayport, lo que teneis que usar son las mediaquerys de CSS.
Como acabo de tener que hacerlo, me voy a chivar de como van con un par de ejemplos de aquí y de allí:
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}
/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
/* some CSS here */
}
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}
/* #### Desktops #### */
@media screen and (min-width: 1024px){
/* some CSS here */
}Este ejemplo sale de stackoverflow, que basicamente ha reemplazado a mi cerebro últimamente.
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <style> @media (max-width: 600px) { .facet_sidebar { size: 60%; } } @media (max-width: 1000px) { .facet_sidebar { size: 75%; } } <style>
Y este lo he tocado un poquito para que veais lo de los tamaños según lo ancha que sea la pantalla, y sale de una de las webs de estos señores, que antes hacian un navegador, creo.
Actualización 20161113 2001: Joder que malos son los sistemas de resaltado de sintaxis, me he tirando más tiempo revisando el segundo CSS que escribiendo o buscando enlaces. Al final me voy a tener que arremangar.
Hi! Welcome to Saiyine Punto Com where I talk about anything that goes through my mind!