如何使Magento的主题响应性和可移动性

Magento中的响应式Web设计概述
响应式网页设计（RWD，也称为响应式设计）精心设计网站，以在各种设备（从大型，高分辨率的台式计算机显示器到mobile电话）上提供最佳的观看体验。

Magento Blank和Luma主题(Luma继承自Blank)的开箱即用使用了mobile first RWD方法。

它主要是通过CSS和JavaScript来保证的。

下图说明了以 Blank 主题为基础的同一页面在mobile设备，平板电脑和台式设备上的外观。

我们建议使用 Blank 主题作为自定义的起点。

也就是说，您的自定义主题应继承自Blank。

本章中的文章描述了Blank主题中使用的特定方法，并提供了有关如何在主题中使用这些方法的实用建议：
1.Magento响应式设计中的CSS
1.1.在这个话题
样式表是自适应Web设计（RWD）实施中的主要工具。

本主题描述了默认Magento 主题中使用的用于构建RWD的机制和方法。

要在自定义主题中重复使用它们，请使您的主题继承自Magento Blank主题。

1.2.Mobile优先
在Blank和Luma主题中，使用“mobile first”方法。

顺序是：
•Mobile
•Tablet
•Desktop
这意味着mobile设备的样式（屏幕宽度小于768px）被较高的 breakpoints样式所扩展。

结果，当在mobile设备上查看商店时，永远不会加载额外的样式。

mobile和desktop样式在单独的文件中定义：
•styles-l.less用于生成特定于desktop的样式（768px及更高）。

•styles-m.less用于生成基本的和特定于mobile设备的样式。

1.3.Breakpoints
CSS代码中使用 breakpoints来设置屏幕宽度，设计从该屏幕宽度切换到mobile 版本到desktop版本。

Blank和Luma主题使用Less变量来实现以下 breakpoints：
•@screen__xxs：320像素
•@screen__xs：480px
•@screen__s：640px
•@screen__m：768px（在Blank和Luma主题中，此 breakpoints在mobile和desktop视图之间切换）
•@screen__l：1024像素
•@screen__xl：1440像素
您可以更改这些 breakpoints或在自定义主题中添加新的 breakpoints。

1.4.Magento默认主题中的Media queries
Blank和Luma主题样式基于[Magento UI库]。

该库使用CSS3 Media queries （该@media规则的扩展）来使布局适应屏幕宽度。

Magento UI库中实现的方法使用@media-common样式组分隔
和.media-width()mixins，可根据需要.less在主题的任何文件中使用该样式组分隔和mixins 多次，但在中仅被调用一次
lib/web/css/source/lib/_responsive.less。

结果styles-m.css和styles-l.css两者都只对每个media query调用一次，并带有所有规则，而不是对同一查询多次调用。

•Media queries @media-common，max screen__s并将max screen__m 添加到中styles-m.css。

•Media queries min screen__m，min screen__l并将添加到中styles-l.css。

如果要处理从“Blank”或“Luma”主题继承的主题，建议使用.media-width()和设置组分隔样式。

否则，样式规则将添加两次，一次添加到styles-m.css，再一次添加到styles-l.css。

对于styles-m.css无需media query即可编译为Less样式的规则，以便将它们应用于所有屏幕宽度，请使用@media-common样式组分隔。

//
// Common (style-m.css)
// _____________________________________________
& when (@media-common = true) {
// your code
}
对于某些media queries中的样式规则分组，可以查询使用的.media-width() mixin。

.media-width(<@extremum>, <@break>);
@extremum: max|min-设置在 media query 条件中使用最小宽度还是最大宽度。

如果max使用，则将styles-m.css使用适当的 media query 放置已编译的样式。

而如果min使用，则已编译的样式将styles-l.css与相应的 media query 一起放入。

@break: value -设置要在 media query 条件下与之比较的 breakpoints的值。

//
// Mobile (style-m.css)
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
// your code
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
// your code
}
//
// Tablet (for the front-end)
// _____________________________________________
@media only screen and (max-width: @screen__m) {
// your code
}
//
// Tablets (for the back-end)
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
// your code
}
//
// Desktop (style-l.css)
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
// your code
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
// your code
}
您可以在
<your_Magento_instance>/pub/static/frontend/Magento/blank/en _US/css/docs/responsive.html（在浏览器中查看）中找到有关Magento UI 库响应混合用法的更多信息
2.Magento响应式设计中的JavaScript
2.1.这个话题是什么
本主题描述了Magento即用型Blank和Luma主题中使用的JavaScript，以重新定位某些元素并根据breakpoint更改其行为。

2.2.脚本概述
Blank和Luma主题使用以下脚本通过breakpoint响应地重新定位页面元素：•[ responsive.js]
•[ menu.js]
•matchMedia.js，由responsive.js和使用menu.js
脚本文件位于文件系统中，如下所示：
├── app/design/frontend/Magento/blank/web/js/
├── responsive.js
├── lib/web/
├── matchMedia.js
├── mage/
├── menu.js
2.3.responsive.js
responsive.js脚本为Blank和Luma主题实现了特定的响应功能。

要操作desktop视图或mobile视图的JavaScript，response .js从matchMedia.js调用mediaCheck()匿名函数。

mediaCheck调用如下所示：
1 2 3 4 5 6 7 8 9
10
11
12
/*...*/
mediaCheck({
media: '(min-width: 768px)',
// Switch to Desktop Version
entry:function(){
/* The function that toggles page elements from desktop to mobile mode is calle d here */
},
// Switch to Mobile Version
exit:function(){
/* The function that toggles page elements from mobile to desktop mode is calle d here*/
}
});/*...*/
例如，response .js在checkout页面上改变了checkout进度块的视图：
•对于desktop视图，checkout进度块永久显示在左侧。

•对于mobile视图，它被CSS移动到checkout步骤下显示。

js使其成为一个可切换的块:默认情况下，checkout进度信息隐藏在你的checkout进度部分，在你点击它之后它是可见的。

2.4.menu.js
在mobile视图中的768px断点上，menu.js通过以下方式更改导航菜单的外观和行为：
•Category菜单项不会显示，但是在单击菜单图标后可以访问。

•Category链接的行为取决于该Category是否具有 sub-categories：
o如果存在 sub-categories，则Category链接将充当可折叠块。

单击Category链接不会立即重定向到Category页面。

而是打开一个sub-categories
列表，包括“All category products”选项。

o如果没有sub-categories，则Category链接的行为与往常一样。

下图说明了mobile视图导航菜单。

2.5.在主题中重用Magento脚本
您可以使用menu.js、 responsive.js和matchMedia.js在你的自定义主题添加响应行为。

如果您的主题是从Blank或Luma继承而来的，则您甚至不需要在主题中另外包含脚本文件。

如果您的主题不是从Blank或Luma继承而来，则要使用脚本，必须为主题配置RequireJS。

3.自定义RWD：图示
3.1.这个话题是什么
本主题的特点是一步一步地演示如何更改产品页面上每行显示的产品数量，以跟上Magento out-of-the-box主题使用的响应式设计方法。

所描述的流程仅适用于从 out-of-the-box的Blank或Luma 主题继承的主题。

3.2.在一行中改变产品的数量
OrangeCo希望通过减少显示在目录页面上的一行产品的数量来增加产品的可见性，这样每个产品都会占用更多的空间。

在基本的Blank主题中，每个breakpoint的行中产品数量如下（对于两列页面布局）：
•1024px及以上(desktop):四个产品
•768px（tablet）：三个产品
•640px及以下（mobile）：两个产品
在其自定义的Orange主题中，OrangeCo希望在desktop 和 tablet视图中拥有最少数量的产品，即：
•Desktop：三个产品
•Tablet：两个产品
•Mobile：两个产品
Orange主题继承于 Blank主题。

要更改产品数量，OrangeCo采取以下步骤：
1.复制
/Magento_Catalog/web/css/source/module/_listings.less文件。

2.将其放在其Orange主题目录中的相应位
置：app/design/frontend/OrangeCo/orange/Magento_Catalog/w eb/css/source/module/_listings.less
3.在代码中进行更改。

下图说明了它们更改文件的哪个部分，突出显示了已修改的行：
在OrangeCo 应用其主题之后，其商店的目录页面如下所示：
（与“Blank”主题的相同页面进行比较。

）
4.创建一个基于Blank的响应式mobile主题4.1.创建特定于mobile设备的主题
要使用Magento out-of-the-box Blank和Luma主题中实现的所有响应方法，您的主题应声明其中一个作为父主题。

要创建mobile专用主题：
1.按照创建主题中所述将主题指定为Blank或Luma作为父主题。

2.添加具有以下内容的
<theme_dir>/Magento_Theme/layout/default_head_blocks.xml 布局文件：
1 2 3 4 5 <page xmlns:xsi="/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation ="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<remove src="css/styles-l.css"/>
</head></page>
<remove>从您的主题中删除特定于desktop的文件。

4.2.应用特定于mobile设备的样式
使用styles-m.less来产生特定的mobile的样式。

1 2 3 4 5 6 <page xmlns:xsi="/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation ="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<remove src="css/styles-l.css"/>
<css src="css/styles-m.css"/>
</head></page>
Media queries @media-common，max screen__m，max screen__s，max @screen__xs和max @screen__xxs将被添加到styles-m.css。

目标屏幕宽度小于480px的LESS mixin的示例：
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
// your code
}
目标屏幕宽度小于768px的LESS mixin的示例：
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
// your code
}
5.使用的术语。