├── matchMedia.js ├── mage/
├── menu.js
2.3. responsive.js
responsive.js脚本为Blank和Luma主题实现了特定的响应功能。要操作desktop视图或mobile视图的JavaScript，response .js从matchMedia.js调用mediaCheck()匿名函数。
mediaCheck调用如下所示：
/*...*/
1 mediaCheck({
2 media: '(min-width: 768px)', 3 // Switch to Desktop Version 4 entry: function () {
5 /* The function that toggles page elements from desktop to mobile mode is calle6 d here */ 7 },
8 // Switch to Mobile Version 9 exit: function () {
10 /* The function that toggles page elements from mobile to desktop mode is calle11 d here*/ 12 }
}); /*...*/
例如，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：
如果存在 sub-categories，则Category链接将充当可折叠块。单击Category链接不会立即重定向到Category页面。而是打开一个sub-categories列表，包括“ All category products”选项。 o 如果没有sub-categories，则Category链接的行为与往常一样。
o
下图说明了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/web/css/source/module/_listings.less 3. 在代码中进行更改。下图说明了它们更改文件的哪个部分，突出显示了已修改的行：
复
在OrangeCo 应用其主题之后，其商店的目录页面如下所示：
（与“Blank”主题的相同页面进行比较。）
4. 创建一个基于Blank的响应式mobile主题
4.1. 创建特定于mobile设备的主题
要使用Magento out-of-the-box Blank和Luma主题中实现的所有响应方法，您的主题应声明其中一个作为父主题。 要创建mobile专用主题： 1. 2.
的
按照创建主题中所述将主题指定为Blank或Luma作为父主题。 添加具有以下内
容
1
4
4.2. 应用特定于mobile设备的样式
使用styles-m.less来产生特定的mobile的样式。
1
4
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
如何使Magento的主题响应性和可移动性
