drupal主题开发

drupal断点breakpoint和响应式图片模块Responsive Image

日期:2017-01-10 阅读:2523

dmandwp系统 - wordpress系统和DM系统区块建站>>

drupal断点breakpoint和响应式图片模块Responsive Image

进入网易云课堂播放
    |    更多视频教程>

关于media query:其实没有一个统一规则,如下:

@media  (min-width: 970px) and (max-width: 1180px) {

...

}

-------------------

drupal8对响应式图片有更好的支持。

断点breakpoint模块(查看文档),在drupal core里,默认启动。

响应式图片模块responsive image也是drupal core,如果要使用,需要启动它。

在模块或主题里,有一个breakpoint.yml文件。

比如tvdrupal.breakpoint.yml

然后在后台-->配置-->media 里找 responsive image,可以新增一个style。这里可以选一个名叫tvdrupal的 breakpoint。

怎么用这个新增的style呢?

在内容类型里,比如找到article,找到manager display,里面有个image.它默认的format可能是image。

这里可以切换成responsive image。再选新增的style.

如下图:

 

如何移除 Removing picturefill polyfill 

responsive image模块考虑ie9不支持picture的标签,所以加了picturefill

可以移除它。

先在info.yml里:

libraries-override:
  core/picturefill: false 

再在core/modules/responsive_image/templates 复制responsive-image.html.twig 

到主题的template目录,再编辑responsive-image.html.twig即可。

http://scottjehl.github.io/picturefill/#ie9 

------------

具体请看视频教程。

 

<<点击返回

Drupal8主题开发视频教程 (进入专题>)