Magento2 less(css)分辨率节点控制

现在的项目基本上要做兼容手机自适应responsive,css 早就给出了media 节点方式判断,当然也可以用之前的css方式来写,但为了严谨,下面例出了Magento2 less(css)分辨率节点控制方式,同时可以做自定义断点,官方也有相关说明

\lib\web\css\source\lib\variables\_responsive.less

定义了6个判点,基本上能满足现在的需求

@screen__xxs: 320px;
@screen__xs: 480px;
@screen__s: 640px;
@screen__m: 768px;
@screen__l: 1024px;
@screen__xl: 1440px;

lib\web\css\source\lib\_responsive.less

lib less库文件解析方式,例举了,几种,当然可以自己添加,建议采用官方方式将_responsive.less 复制到自已的模板web/css/source/lib/

同时web/css/source/_variables.less 添加变量

// Common全局方式
// _____________________________________________

& when (@media-common = true) {

}

// Desktop 桌面pc方式 大于分辨率大于 @screen__m: 768px;
// _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

// Mobile 手机方式 大于分辨率小于 @screen__m: 768px;
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {

发表评论
Magento2 技术支持 上门服务

工作时间
周一至周六
9:00-18:00
相关咨询电话
15360669780
侨海科技