如何使Magento的主题响应性和可移动性.docx
- 文档编号:25648396
- 上传时间:2023-06-11
- 格式:DOCX
- 页数:12
- 大小:134.16KB
如何使Magento的主题响应性和可移动性.docx
《如何使Magento的主题响应性和可移动性.docx》由会员分享,可在线阅读,更多相关《如何使Magento的主题响应性和可移动性.docx(12页珍藏版)》请在冰豆网上搜索。
如何使Magento的主题响应性和可移动性
Magento中的响应式Web设计概述
响应式网页设计(RWD,也称为响应式设计)精心设计网站,以在各种设备(从大型,高分辨率的台式计算机显示器到mobile电话)上提供最佳的观看体验。
MagentoBlank和Luma主题(Luma继承自Blank)的开箱即用使用了mobilefirstRWD方法。
它主要是通过CSS和JavaScript来保证的。
下图说明了以Blank主题为基础的同一页面在mobile设备,平板电脑和台式设备上的外观。
我们建议使用Blank主题作为自定义的起点。
也就是说,您的自定义主题应继承自Blank。
本章中的文章描述了Blank主题中使用的特定方法,并提供了有关如何在主题中使用这些方法的实用建议:
1.Magento响应式设计中的CSS
1.1.在这个话题
样式表是自适应Web设计(RWD)实施中的主要工具。
本主题描述了默认Magento主题中使用的用于构建RWD的机制和方法。
要在自定义主题中重复使用它们,请使您的主题继承自MagentoBlank主题。
1.2.Mobile优先
在Blank和Luma主题中,使用“mobilefirst”方法。
顺序是:
∙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默认主题中的Mediaqueries
Blank和Luma主题样式基于[MagentoUI库]。
该库使用CSS3Mediaqueries(该@media规则的扩展)来使布局适应屏幕宽度。
MagentoUI库中实现的方法使用@media-common样式组分隔和.media-width()mixins,可根据需要.less在主题的任何文件中使用该样式组分隔和mixins 多次,但在中仅被调用一次lib/web/css/source/lib/_responsive.less。
结果styles-m.css和styles-l.css两者都只对每个mediaquery调用一次,并带有所有规则,而不是对同一查询多次调用。
∙Mediaqueries@media-common,maxscreen__s并将maxscreen__m添加到中styles-m.css。
∙Mediaqueriesminscreen__m,minscreen__l并将添加到中styles-l.css。
如果要处理从“Blank”或“Luma”主题继承的主题,建议使用.media-width()和设置组分隔样式。
否则,样式规则将添加两次,一次添加到styles-m.css,再一次添加到styles-l.css。
对于styles-m.css无需mediaquery即可编译为Less样式的规则,以便将它们应用于所有屏幕宽度,请使用@media-common样式组分隔。
//
//Common(style-m.css)
//_____________________________________________
&when(@media-common=true){
//yourcode
}
对于某些mediaqueries中的样式规则分组,可以查询使用的.media-width()mixin。
.media-width(<@extremum>,<@break>);
@extremum:
max|min-设置在 mediaquery 条件中使用最小宽度还是最大宽度。
如果max使用,则将styles-m.css使用适当的 mediaquery 放置已编译的样式。
而如果min使用,则已编译的样式将styles-l.css与相应的 mediaquery 一起放入。
@break:
value -设置要在 mediaquery 条件下与之比较的breakpoints的值。
//
//Mobile(style-m.css)
//_____________________________________________
.media-width(@extremum,@break)when(@extremum='max')and(@break=@screen__s){
//yourcode
}
.media-width(@extremum,@break)when(@extremum='max')and(@break=@screen__m){
//yourcode
}
//
//Tablet(forthefront-end)
//_____________________________________________
@mediaonlyscreenand(max-width:
@screen__m){
//yourcode
}
//
//Tablets(fortheback-end)
//_____________________________________________
.media-width(@extremum,@break)when(@extremum='max')and(@break=@screen__l){
//yourcode
}
//
//Desktop(style-l.css)
//_____________________________________________
.media-width(@extremum,@break)when(@extremum='min')and(@break=@screen__m){
//yourcode
}
.media-width(@extremum,@break)when(@extremum='min')and(@break=@screen__l){
//yourcode
}
您可以在
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)',
//SwitchtoDesktopVersion
entry:
function(){
/*Thefunctionthattogglespageelementsfromdesktoptomobilemodeiscalledhere*/
},
//SwitchtoMobileVersion
exit:
function(){
/*Thefunctionthattogglespageelementsfrommobiletodesktopmodeiscalledhere*/
}
});/*...*/
例如,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列表,包括“ Allcategoryproducts”选项。
o如果没有sub-categories,则Category链接的行为与往常一样。
下图说明了mobile视图导航菜单。
2.5.在主题中重用Magento脚本
您可以使用menu.js、responsive.js和matchMedia.js在你的自定义主题添加响应行为。
如果您的主题是从Blank或Luma继承而来的,则您甚至不需要在主题中另外包含脚本文件。
如果您的主题不是从Blank或Luma继承而来,则要使用脚本,必须为主题配置RequireJS。
3.自定义RWD:
图示
3.1.这个话题是什么
本主题的特点是一步一步地演示如何更改产品页面上每行显示的产品数量,以跟上Magentoout-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设备的主题
要使用Magentoout-of-the-boxBlank和Luma主题中实现的所有响应方法,您的主题应声明其中一个作为父主题。
要创建mobile专用主题:
1.按照创建主题中所述将主题指定为Blank或Luma作为父主题。
2.添加具有以下内容的
1
2
3
4
5
xsi="http: //www.w3.org/2001/XMLSchema-instance"xsi: noNamespaceSchemaLocation="urn: magento: framework: View/Layout/etc/page_configuration.xsd">
4.2.应用特定于mobile设备的样式
使用styles-m.less来产生特定的mobile的样式。
1
2
3
4
5
6
xsi="http: //www.w3.org/2001/XMLSchema-instance"xsi: noNamespaceSchemaLocation="urn: magento: framework: View/Layout/etc/page_configuration.xsd">
Mediaqueries@media-common,maxscreen__m,maxscreen__s,max@screen__xs和max@screen__xxs将被添加到styles-m.css。
目标屏幕宽度小于480px的LESSmixin的示例:
.media-width(@extremum,@break)when(@extremum='max')and(@break=@screen__xs){
//yourcode
}
目标屏幕宽度小于768px的LESSmixin的示例:
.media-width(@extremum,@break)when(@extremum='max')and(@break=@screen__m){
//yourcode
}
5.使用的术语
术语
描述
Breakpoint
导致您的响应式布局发生变化的用户屏幕的宽度。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 如何 Magento 主题 响应 移动性