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 

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

具体请看视频教程。