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 }
您可以在
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/
如何使Magento的主题响应性和可移动性
