媒体查询:不起作用 [英] Media queries: not working

查看：57 发布时间：2022/1/4 18:34:26 html css responsive-design media-queries

本文介绍了媒体查询:不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 webpack 和较少的预处理器.我还在 main.less 的底部包含了 media.less 文件.问题是 @media 标签内的所有样式都被忽略了.

CSS 代码:

@media all and (min-device-width : 414px) and (max-device-width : 736px) {身体 {背景颜色:黑色；//忽略，但如果把它放在@media 标签之外 - 它可以工作}}

HTML:

<html lang="zh-cn"><头>......<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><身体>......

webpackConfig.js:

模块:{装载机: [{ 测试:/.less$/, 加载器: ['style', 'css', 'autoprefixer', 'less'] },………………]},.....

解决方案

UPDATE

min/max-device-width 是 已弃用

<块引用>

已弃用

此功能已从 Web 标准中删除.虽然一些浏览器可能仍然支持它，但它正在被丢弃.尽可能避免使用它并更新现有代码；请参阅本页底部的兼容性表以指导您决定.请注意，此功能可能随时停止工作

<小时>

代替使用

@media all and (min-device-width : 414px) and (max-device-width : 736px)

仅供使用

@media all and (min-width : 414px) and (max-width : 736px)

<小时>

为什么?

`min/max-width`

<块引用>

宽度媒体特征描述了渲染表面的宽度输出设备(例如文档窗口的宽度，或打印机页面框的宽度).

`min/max-设备宽度`

<块引用>

确定输出设备是网格设备还是位图设备.如果设备是基于网格的(例如 TTY 终端或手机显示只有一种字体)，值为1，否则为零.

I'm using webpack and less preprocessor. Also I include media.less file at the bottom of main.less. The problem is all styles inside @media tags are ignored.

CSS code:

@media all and (min-device-width : 414px) and (max-device-width : 736px) {
  body {
    background-color: black; //ignored, but if put it outside @media tag - it works
  }
}

HTML:

<!doctype html>
<html lang="en">
    <head>
        ......
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    </head>
    <body>
        ......
    </body>
</html>

webpackConfig.js:

module: {
  loaders: [
    { test: /.less$/, loaders: ['style', 'css', 'autoprefixer', 'less'] },
    ..................
  ]
},
.....

解决方案

UPDATE

min/max-device-width are deprecated

Deprecated

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time

Instead of using

@media all and (min-device-width : 414px) and (max-device-width : 736px)

Use only

@media all and (min-width : 414px) and (max-width : 736px)

WHY?

`min/max-width`

The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

`min/max-device-width`

Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.

这篇关于媒体查询:不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

媒体查询:不起作用 [英] Media queries: not working

问题描述

`min/max-width`

`min/max-设备宽度`

`min/max-width`

`min/max-device-width`

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

媒体查询:不起作用 [英] Media queries: not working

问题描述

min/max-width

min/max-设备宽度

min/max-width

min/max-device-width

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

`min/max-width`

`min/max-设备宽度`

`min/max-width`

`min/max-device-width`

登录关闭