@ media-common-我们为什么需要使用它?


12

在Magento 2 lib文档中,它包含以下内容:

@ media-common:true | false-设置是否输出通用样式。对于常用样式,每次您要添加一些样式时都应使用

& when (@media-common = true) {
    your styles
}

使用此代码和只写Less而没有它有什么区别?如:

& when (@media-common = true) {
    body {
        background: blue;
    }
}

如何将其编译为:

body {
    background: blue;
}

它将不会以styles-l.css和styles-m.css输出吗?

Answers:


16

Magento 2遵循Mobile First方法@ media-common = true旨在定义基本样式(移动样式),并且必须存在于中styles-m.css。如果删除该声明,样式将同时输出到styles-m.cssstyles-l.css文件。


嗯,这更有意义,谢谢。因此,当media-common = true时,它将仅输出到styles-m.css,而将media-common = false设置与完全不使用它一样吗?
本·克鲁克

1
是。实际上是媒体常见的:false;仅用于styles-l.less。因此,我认为false除非有人为某些自定义的独立CSS文件设置,否则不会有人故意将其设置为?对于后端样式,可以同时使用:@ media-common或删除该声明,因为所有样式都在单个css文件中。
奥尔加

在非移动显示器上,magento会添加styles-l.less,因此所有样式styles-m.less仍然适用,那么为什么将media-common:true之外的代码添加到两个文件中?
Volvox

完全是@Volvox。因为不使用media-common:true会将样式输出到styles-l.lessstyles-m.less。使用media-common:true时,它将以style-m输出样式,但实际上将应用于移动和桌面!我现在要检查一下以确保。
Mohammed Joraid '19
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.