I'm using Bootstrap 3 to build a responsive layout where I want to adjust a few font sizes according to the screen size. How can I use media queries to make this kind of logic?
This question is related to
css
twitter-bootstrap
media-queries
If you're using LESS or SCSS/SASS and you're using a LESS/SCSS version of Bootstrap, you can use variables as well, provided you have access to them. A LESS translation of @full-decent's answer would be as follows:
@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 */
There are also variables for @screen-sm-max and @screen-md-max, which are 1 pixel less than @screen-md-min and @screen-lg-min, respectively, typically for use with @media(max-width).
EDIT: If you're using SCSS/SASS, variables start with a $ instead of a @, so it'd be $screen-xs-max etc.
you can see in my example font sizes and background colors are changing according to the screen size
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1.0">_x000D_
<style>_x000D_
body {_x000D_
background-color: lightgreen;_x000D_
}_x000D_
/* Custom, iPhone Retina */ _x000D_
@media(max-width:320px){_x000D_
body {_x000D_
background-color: lime;_x000D_
font-size:14px;_x000D_
}_x000D_
}_x000D_
@media only screen and (min-width : 320px) {_x000D_
body {_x000D_
background-color: red;_x000D_
font-size:18px;_x000D_
}_x000D_
}_x000D_
/* Extra Small Devices, Phones */ _x000D_
@media only screen and (min-width : 480px) {_x000D_
body {_x000D_
background-color: aqua;_x000D_
font-size:24px;_x000D_
}_x000D_
}_x000D_
/* Small Devices, Tablets */_x000D_
@media only screen and (min-width : 768px) {_x000D_
body {_x000D_
background-color: green;_x000D_
font-size:30px;_x000D_
}_x000D_
}_x000D_
/* Medium Devices, Desktops */_x000D_
@media only screen and (min-width : 992px) {_x000D_
body {_x000D_
background-color: grey;_x000D_
font-size:34px;_x000D_
}_x000D_
}_x000D_
/* Large Devices, Wide Screens */_x000D_
@media only screen and (min-width : 1200px) {_x000D_
body {_x000D_
background-color: black;_x000D_
font-size:42px;_x000D_
}_x000D_
}_x000D_
</style>_x000D_
</head>_x000D_
<body>_x000D_
<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>_x000D_
</body>_x000D_
</html>keep in mind that avoiding text scaling is the main reason responsive layouts exist. the entire logic behind responsive sites is to create functional layouts that effectively display your content so its easily readable and usable on multiple screen sizes.
Although It is necessary to scale text in some cases, be careful not to miniaturise your site and miss the point.
heres an example anyway.
@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}
}
Also keep in mind the 480 viewport has been dropped in bootstrap 3.
@media only screen and (max-width : 1200px) {}
@media only screen and (max-width : 979px) {}
@media only screen and (max-width : 767px) {}
@media only screen and (max-width : 480px) {}
@media only screen and (max-width : 320px) {}
@media (min-width: 768px) and (max-width: 991px) {}
@media (min-width: 992px) and (max-width: 1024px) {}
Use media queries for 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) {
}
These are the values from 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){}
Based on the other users' answers, I wrote these custom mixins for easier usage:
.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(); } }
Example usage
body {
.when-lg({
background-color: red;
});
}
@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; } }
Example usage:
body {
@include when-md {
background-color: red;
}
}
@media (min-width:1200px) {
body {
background-color: red;
}
}
Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
Extra small devices (portrait phones, less than 576px)
No media query for xs since this is the default in Bootstrap
Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
No media query necessary for xs breakpoint as it's effectively @media (min-width: 0) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
For understand it deeply please go through below link
To improve the main response:
You can use the media attribute of the <link> tag (it support media queries) in order to download just the code the user needs.
<link href="style.css" rel="stylesheet">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">
With this, the browser will download all CSS resources, regardless of the media attribute. The difference is that if the media-query of the media attribute is evaluated to false then that .css file and his content will not be render-blocking.
Therefore, it is recommended to use the media attribute in the <link> tag since it guarantees a better user experience.
Here you can read a Google article about this issue https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
Some tools that will help you to automate the separation of your css code in different files according to your media-querys
Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin
PostCSS https://www.npmjs.com/package/postcss-extract-media-query
Here is a more modular example using LESS to mimic Bootstrap without importing the less files.
@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) {
}
Here is an even easier one stop solution, including separate responsive files based on media queries.
This allows all the media query logic and include logic to only have to exist on one page, the loader. It also allows to not have the media queries clutter up the responsive stylesheets themselves.
//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 would look like this
/**
* 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 would look like this
/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
background-color: @fadedgreen;
}
your index would just have to load the loader.less
<link rel="stylesheet/less" type="text/css" href="loader.less" />
easy peasy..
We use the following media queries in our Less files to create the key breakpoints in our grid system.
/* 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) { ... }
see also on Bootstrap
@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;
}
}
#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;
}
}
Here are two examples.
Once the viewport becomes 700px wide or less make all h1 tags 20px.
@media screen and ( max-width: 700px ) {
h1 {
font-size: 20px;
}
}
Make all the h1's 20px until the viewport reaches 700px or larger.
@media screen and ( min-width: 700px ) {
h1 {
font-size: 20px;
}
}
Hope this helps :0)
As of Bootstrap v3.3.6 the following media queries are used which corresponds with the documentation that outlines the responsive classes that are available (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) {}
Media queries extracted from the Bootstrap GitHub repository from the following less files:-
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
:)
In latest bootstrap (4.3.1), using SCSS(SASS) you can use one of @mixin from /bootstrap/scss/mixins/_breakpoints.scss
Media of at least the minimum breakpoint width. No query for the smallest breakpoint. Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
Media of at most the maximum breakpoint width. No query for the largest breakpoint. Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
Media that spans multiple breakpoint widths. Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
Media between the breakpoint's minimum and maximum widths. No minimum for the smallest breakpoint, and no maximum for the largest one. Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
For example:
.content__extra {
height: 100%;
img {
margin-right: 0.5rem;
}
@include media-breakpoint-down(xs) {
margin-bottom: 1rem;
}
}
Documentation:
Happy coding ;)
Based on bisio's answer and the Bootstrap 3 code, I was able to come up with a more accurate answer for anyone just looking to copy and paste the complete media query set into their stylesheet:
/* 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) {
}
Source: Stackoverflow.com