我使用Bootstrap 3来构建一个响应式布局，我想根据屏幕大小调整一些字体大小。 我如何使用媒体查询来实现这种逻辑?
当前回答
这里有两个例子。
一旦视口变成700px宽或更小，使所有h1标签20px。
@media screen and ( max-width: 700px ) {
h1 {
font-size: 20px;
}
}
使所有h1的20px，直到视口达到700px或更大。
@media screen and ( min-width: 700px ) {
h1 {
font-size: 20px;
}
}
希望这能有所帮助:
其他回答
在我的例子中，你可以看到字体大小和背景颜色根据屏幕大小而变化
<!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>
改进主响应:
您可以使用<link>标记的media属性(它支持媒体查询)来下载用户需要的代码。
<link href="style.css" rel="stylesheet">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">
这样，浏览器将下载所有CSS资源，而不考虑介质属性。 区别在于，如果media属性的media-query被赋值为false，那么.css文件及其内容将不会被渲染阻塞。
因此，建议在<link>标签中使用media属性，可以保证更好的用户体验。
在这里你可以阅读谷歌关于这个问题的文章https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
一些工具，将帮助您自动分离您的css代码在不同的文件根据您的媒体查询
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
下面是一个更模块化的例子，使用LESS来模拟Bootstrap，而不导入LESS文件。
@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) {
}
这里有一个更简单的一站式解决方案，包括基于媒体查询的独立响应文件。
这允许所有媒体查询逻辑和包含逻辑只存在于一个页面，即加载器。它还允许媒体查询不会使响应式样式表本身混乱。
//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
* 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。更少的会像这样
/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
background-color: @fadedgreen;
}
你的索引只需要加载loader。less
<link rel="stylesheet/less" type="text/css" href="loader.less" />
很简单…
我们在Less文件中使用以下媒体查询在网格系统中创建关键断点。
/* 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) { ... }
参见Bootstrap
