css3 - tutorial - como usar bootstrap
Twitter Bootstrap 3: ¿cómo utilizar consultas de medios? (15)
Estoy usando Bootstrap 3 para crear un diseño receptivo donde quiero ajustar algunos tamaños de fuente según el tamaño de la pantalla. ¿Cómo puedo usar las consultas de los medios para hacer este tipo de lógica?
Pantalla de solo media y (ancho máximo: 1200 px) {}
Pantalla de solo media y (ancho máximo: 979 px) {}
Pantalla de solo media y (ancho máximo: 767 px) {}
Pantalla de solo media y (ancho máximo: 480 px) {}
Pantalla de solo media y (ancho máximo: 320 px) {}
@media (ancho mínimo: 768 píxeles) y (ancho máximo: 991 píxeles) {}
@media (ancho mínimo: 992 píxeles) y (ancho máximo: 1024 píxeles) {}
Puedes ver en mi ejemplo los tamaños de fuente y los colores de fondo están cambiando de acuerdo con el tamaño de la pantalla
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
/* Custom, iPhone Retina */
@media(max-width:320px){
body {
background-color: lime;
font-size:14px;
}
}
@media only screen and (min-width : 320px) {
body {
background-color: red;
font-size:18px;
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
body {
background-color: aqua;
font-size:24px;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
body {
background-color: green;
font-size:30px;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
body {
background-color: grey;
font-size:34px;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
body {
background-color: black;
font-size:42px;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is larger than the height, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Bootstrap 3
Aquí están los selectores utilizados en BS3, si quieres mantenerte consistente:
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Nota: Para su información, esto puede ser útil para la depuración:
<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>
Bootstrap 4
Aquí están los selectores utilizados en BS4. No hay una configuración "más baja" en BS4 porque "extra pequeño" es el valor predeterminado. Es decir, primero debe codificar el tamaño XS y luego hacer que estos medios se sobrescriban.
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Actualización 2018-05-03: la información de BS3 sigue siendo precisa a partir de la versión 3.3.7, BS4 actualizada para la nueva cuadrícula publicada en 4.1.1.
O simple Sass-Compass:
@mixin col-xs() {
@media (max-width: 767px) {
@content;
}
}
@mixin col-sm() {
@media (min-width: 768px) and (max-width: 991px) {
@content;
}
}
@mixin col-md() {
@media (min-width: 992px) and (max-width: 1199px) {
@content;
}
}
@mixin col-lg() {
@media (min-width: 1200px) {
@content;
}
}
Ejemplo:
#content-box {
@include border-radius(18px);
@include adjust-font-size-to(18pt);
padding:20px;
border:1px solid red;
@include col-xs() {
width: 200px;
float: none;
}
}
A partir de Bootstrap v3.3.6, se utilizan las siguientes consultas de medios que se corresponden con la documentación que describe las clases receptivas disponibles ( http://getbootstrap.com/css/#responsive-utilities ).
/* Extra Small Devices, .visible-xs-* */
@media (max-width: 767px) {}
/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {}
/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {}
/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {}
Consultas de medios extraídas del repositorio Bootstrap GitHub de los siguientes menos archivos:
https://github.com/twbs/bootstrap/blob/v3.3.6/less/responsive-utilities.less https://github.com/twbs/bootstrap/blob/v3.3.6/less/variables.less
Aquí hay dos ejemplos.
Una vez que la ventana gráfica tenga 700px de ancho o menos, haga que todas las etiquetas h1 sean 20px.
@media screen and ( max-width: 700px ) {
h1 {
font-size: 20px;
}
}
Realice todos los 20px de h1 hasta que la ventana gráfica alcance 700px o más.
@media screen and ( min-width: 700px ) {
h1 {
font-size: 20px;
}
}
Espero que esto ayude: 0)
Aquí hay un ejemplo más modular que usa LESS para imitar Bootstrap sin importar menos archivos.
@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;
//xs only
@media(max-width: @screen-xs-max) {
}
//small and up
@media(min-width: @screen-sm-min) {
}
//sm only
@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
}
//md and up
@media(min-width: @screen-md-min) {
}
//md only
@media(min-width: @screen-md-min) and (max-width: @screen-md-max) {
}
//lg and up
@media(min-width: @screen-lg-min) {
}
Aquí hay una solución integral aún más fácil, que incluye archivos de respuesta separados basados en consultas de medios.
Esto permite que toda la lógica de consulta de medios e incluir la lógica solo tengan que existir en una página, el cargador. También permite que las consultas de los medios no abarroten las propias hojas de estilo de respuesta.
//loader.less
// this twbs include adds all bs functionality, including added libraries such as elements.less, and our custom variables
@import ''/app/Resources/less/bootstrap.less'';
/*
* Our base custom twbs overrides
* (phones, xs, i.e. less than 768px, and up)
* no media query needed for this one since this is the default in Bootstrap
* All styles initially go here. When you need a larger screen override, move those
* overrides to one of the responsive files below
*/
@import ''base.less'';
/*
* Our responsive overrides based on our breakpoint vars
*/
@import url("sm-min.less") (min-width: @screen-sm-min); //(tablets, 768px and up)
@import url("md-min.less") (min-width: @screen-md-min); //(desktops, 992px and up)
@import url("large-min.less") (min-width: @screen-lg-min); //(large desktops, 1200px and up)
base.less se vería así
/**
* base.less
* bootstrap overrides
* Extra small devices, phones, less than 768px, and up
* No media query since this is the default in Bootstrap
* all master site styles go here
* place any responsive overrides in the perspective responsive sheets themselves
*/
body{
background-color: @fadedblue;
}
sm-min.less se vería así
/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
background-color: @fadedgreen;
}
tu índice solo tendría que cargar el loader.less
<link rel="stylesheet/less" type="text/css" href="loader.less" />
pan comido..
Basándome en la respuesta de bisio y el código de Bootstrap 3, pude encontrar una respuesta más precisa para cualquiera que quiera copiar y pegar el conjunto completo de consultas de medios en su hoja de estilo:
/* Large desktops and laptops */
@media (min-width: 1200px) {
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
}
/* Portrait phones and smaller */
@media (max-width: 480px) {
}
Basándome en las respuestas de los otros usuarios, escribí estos mixins personalizados para un uso más sencillo:
Menos entrada
.when-xs(@rules) { @media (max-width: @screen-xs-max) { @rules(); } }
.when-sm(@rules) { @media (min-width: @screen-sm-min) { @rules(); } }
.when-md(@rules) { @media (min-width: @screen-md-min) { @rules(); } }
.when-lg(@rules) { @media (min-width: @screen-lg-min) { @rules(); } }
Ejemplo de uso
body {
.when-lg({
background-color: red;
});
}
Entrada SCSS
@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }
Ejemplo de uso:
body {
@include when-md {
background-color: red;
}
}
Salida
@media (min-width:1200px) {
body {
background-color: red;
}
}
Estos son los valores de Bootstrap3:
/* Extra Small */
@media(max-width:767px){}
/* Small */
@media(min-width:768px) and (max-width:991px){}
/* Medium */
@media(min-width:992px) and (max-width:1199px){}
/* Large */
@media(min-width:1200px){}
Si está utilizando LESS o SCSS / SASS y está utilizando una versión de LESS / SCSS de Bootstrap, también puede usar variables , siempre que tenga acceso a ellas. Una MENOS traducción de la respuesta de @ full-decent sería la siguiente:
@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){} /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: @screen-md-min){} /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: @screen-lg-min){} /* deprecated: @screen-lg-desktop, or @screen-lg */
También hay variables para @screen-sm-max y @screen-md-max , que son 1 píxel menos que @screen-md-min y @screen-lg-min , respectivamente, típicamente para uso con @media(max-width) .
EDITAR: Si está utilizando SCSS / SASS, las variables comienzan con $ lugar de @ , por lo que sería $screen-xs-max etc.
Usa consultas de medios para IE;
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
Usamos las siguientes consultas de medios en nuestros archivos Less para crear los puntos de interrupción clave en nuestro sistema de grid.
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
véase también en Bootstrap
tenga en cuenta que evitar la escala de texto es la razón principal por la que existen diseños sensibles. La lógica completa detrás de los sitios de respuesta es crear diseños funcionales que muestren de manera efectiva su contenido para que sea fácil de leer y utilizar en múltiples tamaños de pantalla.
Aunque es necesario escalar el texto en algunos casos, tenga cuidado de no miniaturizar su sitio y perder el punto.
Heres un ejemplo de todos modos.
@media(min-width:1200px){
h1 {font-size:34px}
}
@media(min-width:992px){
h1 {font-size:32px}
}
@media(min-width:768px){
h1 {font-size:28px}
}
@media(max-width:767px){
h1 {font-size:26px}
}
También tenga en cuenta que la ventana gráfica 480 se ha eliminado en bootstrap 3.