我使用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;
  }
}

希望这能有所帮助:

其他回答

这里有两个例子。

一旦视口变成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;
  }
}

希望这能有所帮助:

我们在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

使用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) {
}

这些是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){}

改进主响应:

您可以使用<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