magento自适分辨率布局(大屏幕,大分辨率)layout

magento自适分辨率布局(大屏幕,大分辨率),行业称流布局,典型案例:亚马逊www.amazon.com,我想曾经有无数做开发的仿过此站,但布局现图片搭配仿出的站往往是不级格,包括本人,今天分析了一下具体的需求,主要的重点还是js,脚本与css style这块如何做的自适应,之前有 一个模板,做了两种样式分别是不同的尺寸,调用不同的样式

var css_1024 ="getSkinUrl('css/narrow.css');?>";
jQuery(window).resize(function(){
if(window.innerWidth<=1200) { jQuery("#width_adjust").attr("href", css_1024); } else { jQuery("#width_adjust").removeAttr("href", ""); } }) width = parseInt(screen.width); if (width <= 1200) { jQuery("#width_adjust").attr("href", css_1024); } else { jQuery("#width_adjust").removeAttr("href", ""); }

这种方式对于做流布局还是有所欠佳的,仔细分析亚马逊的布局,有些朋友一开始会觉的很临乱,很空,不像国内淘宝,京东,满满的内容,但个人体会觉的简约而美,焦点图采用 留白的方式,让升缩窗口大小也保持一致,如果是有背景的可能就很难看了,首页三栏布局,左边与右侧固宽,中间自适应同时升缩窗口也能让商品不会错位掉下来的体验,这里采用了js css的方式与等无缝的对接,商品的循环把tabele td发挥的相当好,不过个人感觉沉于代码也会很多。
同时也可以看一下 wordpress后台,这里也是流布局,代码很简约jquery方式,流布局好是好,但也不是很完美,当然布局是多变的,适合自己的是最好的,期待下一个流布局的omagento自适分辨率布局发布,正着手打造

发表评论
Magento2 技术支持 上门服务

工作时间
周一至周六
9:00-18:00
相关咨询电话
15360669780
侨海科技