js中flexible.js实现淘宝弹性布局方案

本文的内容就是介绍淘宝弹性布局方案lib-flexible实践，分享给大家供大家参考，具体内容如下

1. 页面需求

这是要做的页面效果（不要对设计置评，这不是开发人员决定的）：

这是尺寸标注图（750*1334）：

然后美工在750*1334的设计稿之上，按我的要求提供以下素材的切图：

包括两个下载按钮的背景图片，logo，底部梯形的渐变背景和body部分的mobile 背景图。注意这些图片都是在750*1334的设计稿里面切出来的，所以尺寸都是设计稿里的原始尺寸，比如android.png：

考虑到retina显示屏的问题，结合下图的适配思路：

我认为解决retina屏问题的可行方案是：

1）在devicePixelRatio<=2时，图片统一使用750设计稿的切图

2）在devicePixelRatio>=2时，图片统一使用750*1.5=1125，也就是所谓@3x设计稿的切图。

我把美工给我的在750*1334的设计稿下的切图都放在img/@2x 这个文件夹下：

然后让她帮忙把750的设计稿矢量放大1.5倍，再按照同样的切图要求为我提供@3x的切图，并放在了img/@3x 这个文件夹下：

@3x下的图片理论上尺寸应该等于@2x下的图片*1.5，不过我的切的没有这么完美。

有了前面的需求介绍和素材准备，下一步就是该引入核心的js文件，编写css样式了。

2. 引入flexible.js

这一步其实非常简单，只要把flexible.js的内容复制出来，在本地新建一个flexible.js的文件，打开粘贴进去就可以了，我把这个文件放在了js/lib下面：

接着在html页面里面，尽可能早的引入这个js文件（为了让适配的效果更快）：

注：使用lib-flexible，通常不要写：

代码如下:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

交给flexible.js自动处理。

然后在chrome的模拟器里面，选择iphone6，应该就能看到html的font-size已经被设置为font-size: 75px了：

3. 编写CSS
基本要求：

1）除font-size外，其它大小都根据750标注稿的尺寸，转换成rem单位的值，转换方法为：标注稿尺寸 / 标注稿基准字体大小；

2）标注稿基准字体大小 = 标注稿宽度 / 10，如标注稿宽为750，标注稿基准字体大小为75；标注稿宽为640，标注稿基准字体大小为64；（所以淘宝这个方案是可以在任意设计稿尺寸下使用的）

3）如果需要设置font-size，可跟据html的data-dpr属性来处理，类似下面的写法：

[data-dpr="2"] p {
  font-size: 16px;
}

[data-dpr="3"] p {
  font-size: 24px;
}

以安卓下载按钮的样式为例，说明这种用法。android.png的尺寸为：414*80，所以css这么写：

.btn {
  width: 414rem/@font-size-base;
  height: 80rem/@font-size-base;
}

由于用了less，事先定义了一个变量来保存标注稿基准字体大小：

@font-size-base: 75;
所以px2rem的转换变得非常容易，如上所示。less编译之后，会将正确的rem值计算出来：

.btn {
 width: 5.52rem;
 height: 1.06666667rem;
}

到此，lib-flexible的基本实践就结束了，不过还有一个问题，就是retina屏的问题，到现在都还没提到@3x下图的那些切图怎么办，其实很简单，借助html元素的data-dpr属性，可以轻松实现另一种媒介查询，以便在devicePixelRatio>=2的时候启用@3x下的图片，还是以安卓下载按钮的样式为例，写法是：

.btn-android {
 background-image: url("../img/@2x/android.png?v=@@version");
 [data-dpr="3"] }

这下就OK了，原先还不知道data-dpr有什么作用，现在看看，作用还是挺大的。

注：

  • 1） 由于使用了grunt构建，所以需要先安装node ,git，再通过npm安装grunt 和bower
  • 2）考虑到将来可能要做全屏滚动的效果，所以这页面一开始就是用fullpage.js来做的，通过bower引入了jquery跟fullpage.js的库
  • 3） 模块化用到了requirejs
  • 4）运行grunt default完成构建，再运行grunt server启动静态服务器预览。

以上就是实现淘宝弹性布局方案lib-flexible实践的全部过程，希望对大家的学习有所启发。

赞 (0)

相关推荐

  • JS 循环li添加点击事件 （闭包的应用）

    废话不多说了,直接给大家贴代码了,具体代码如下所述: var aLi = document.querySelectorAll('.article-tab li'); for (var i = 0; i <= aLi.length; i++) { (function(){ var p = i aLi[i].onclick = function() { alert(p); } })(); } 以上所述是小编给大家介绍的JS 循环li添加点击事件 (闭包的应用),希望对大家有所帮助,如果大家有任何疑问

  • 原生JS实现响应式瀑布流布局

    原生JS实现响应式瀑布流布局

    原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http://leozdgao.github.io/demo/responsive_waterfall/ 演示图: 核心代码: responsive_waterfall.js (function() { var Waterfall = function(opts) { var minBoxWidth; Object.defineProper

  • 基于JavaScript实现瀑布流布局

    基于JavaScript实现瀑布流布局

    本文实例讲解了原生JavaScript实现瀑布流布局详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="

  • JavaScript中rem布局在react中的应用

    前面给大家分享了一个react项目(http://www.jb51.net/article/76085.htm),这次对这个项目做了一些改进,增加了rem布局和对iscroll在Android上的优化. 项目代码,欢迎fork和star,在线预览 REM布局实例代码 var fontSizeInit = function() { var doc = document.documentElement, cli = doc.clientWidth; cli&&(cli/=320,2<cl

  • JS实现同一个网页布局滑动门和TAB选项卡实例

    JS实现同一个网页布局滑动门和TAB选项卡实例

    本文实例讲述了JS实现同一个网页布局滑动门和TAB选项卡.分享给大家供大家参考.具体如下: 这里演示同一个网页布局滑动门和TAB选项卡效果,其实滑动门和选项卡没有太大的区别,无非是鼠标动作的不同而已,但是有时候在同一个网页中布局两个以上的选项卡,总容易产生混乱,导致JS出错,如果你需要这样做,那么就请参考本实例,帮你解决这个问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-hd-tab-menu-style-codes/ 具体

  • JS+DIV+CSS排版布局实现美观的选项卡效果

    JS+DIV+CSS排版布局实现美观的选项卡效果

    本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • js 提交form表单和设置form表单请求路径的实现方法

    如下所示: form表单ID:postform 设置表单请求url document.postform.action = "SaveReturnInfo"; 提交form表单 document.getElementById("postform").submit(); 以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了,希望大家多多支持我们~

  • js中flexible.js实现淘宝弹性布局方案

    js中flexible.js实现淘宝弹性布局方案

    本文的内容就是介绍淘宝弹性布局方案lib-flexible实践,分享给大家供大家参考,具体内容如下 1. 页面需求 这是要做的页面效果(不要对设计置评,这不是开发人员决定的): 这是尺寸标注图(750*1334): 然后美工在750*1334的设计稿之上,按我的要求提供以下素材的切图: 包括两个下载按钮的背景图片,logo,底部梯形的渐变背景和body部分的mobile 背景图.注意这些图片都是在750*1334的设计稿里面切出来的,所以尺寸都是设计稿里的原始尺寸,比如android.png:

  • Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法

    淘宝弹性布局lib-flexible lib-flexible并不单独使用,而是搭配px2rem-loader一起做适配方案,目的是自动将css中的px转换成rem,在项目中还是按照设计稿写上对应的固定像素(px)就行. 移动端适配的具体步骤 第一步:安装插件 lib-flexible npm i lib-flexible --save-dev 第二步:安装px2rem loader npm install px2rem-loader --save-dev 第三步:在main.js中引入lib-

  • js 中rewrap-ajax.js插件实例代码

    最近写了一个JS插件,用圈内的话说叫造了个轮子,造的好与不好都不是自己说了算,关键还是大家用的好与不好. 当然我自己也在使用,由于个人偏爱与喜好,所以未能借签其他Ajax框架的写法,目前的版本都是以版本一进行往上整合的成果,所以你想要全面了解内部的结构,可以先从版本一开始看起. 现在我们说说整体的设计结构,版本一是好友收集整理的方法,基础的写法已经成型,调用nativeAjax方放即可,方法内部有三个参数,第一个为ajax的属性,第二个为成功的函数,第三个为错误的函数,具体如下: nativeA

  • JS与JQuery分别实现淘宝五星好评特效

    JS与JQuery分别实现淘宝五星好评特效

    本文实例为大家分享了JS与JQuery实现淘宝五星好评特效的具体代码,供大家参考,具体内容如下 我们经常用的五星好评是如何来的,主要就是三个Event 中的三个事件分别: onmouseover  指向事件 onmouseout  离开事件 onclick  点击事件 代码展示: <!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <title><

  • JavaScript 全面解析各种浏览器网页中的JS 执行顺序

    我们知道javaScript是一种解释型语言,他的执行是自上而下,但是各个浏览器对于至上而下的理解是有细微差别的,而代码的上下游也就是程序流又对于程序正确至关重要,所以我觉得有必要深入理解多个js块儿的执行顺序. 首先得知道有多少方法能把javaScript加入到页面中呢?常见下述的前2种,其实还有更多. 1.页面中直接引入外部js文件:<script src="my.js"></script> 2.页面中直接写如js片段<script>alert(

  • js中eval()函数和trim()去掉字符串左右空格应用

    对于js中eval()函数的理解和写一个函数trim()去掉字符串左右空格. trim()是参照了jquery的源码,你可以放心使用. 对于js中eval()函数的理解是本人心得不一定正确. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <he

  • PHP实现采集抓取淘宝网单个商品信息

    调用淘宝的数据可以使用淘宝提供的api,如果只需调用淘宝商品图片名称等公开信息在自己网站上,使用php中的 file_get_contents 函数实现即可. 思路: file_get_contents(url) 该函数根据 url 如 http://www.baidu.com 将该网页内容(源码)以字符串形式输出(一个整字符串),然后配合preg_match,preg_replace等这些正则表达式操作就可以实现获取该url特定div,img等信息了.当然前题是淘宝在单个商品页面的结构是固定的

  • 仿淘宝JSsearch搜索下拉深度用法

    我们首先给出本次关于JSsearch程序的相关源码:https://gitee.com/skyogo/JSsearch 我们下载JSsearch1.0 Community版本 下载好了之后我们再下载一个类似淘宝的购物页面 然后,我们打开这个页面,会发现是这样的 此时我们关掉页面,将我们的JSsearch.js拷贝一份到淘宝页面的根目录的js文件夹下面 拷贝完了之后,我们在html页面中引入它(在body最底部写) <script src="js/JSsearch.js">&

  • selenium 反爬虫之跳过淘宝滑块验证功能的实现代码

    在处理问题的之前,给大家个第一个锦囊! 你需要将chorme更新到最新版版本84,下载对应的chorme驱动 链接:http://chromedriver.storage.googleapis.com/index.html 注意 划重点!!一定要做这一步,因为我用的83的chorme他是不行滴,~~~~~~~ 问题 1.一周前我的滑块验证代码还是可以OK的,完全没问题!附代码 low一眼 url = "https://login.taobao.com/member/login.jhtml&quo

  • js仿淘宝和百度文库的评分功能

    js仿淘宝和百度文库的评分功能

    本文实例为大家分享了类似于淘宝和百度文库的评分功能,js实现,供大家参考,具体内容如下 效果如图: 五个五角星分别放在了一个table的五列中.下面是一个<p>,用来显示评分结果的:代码如下: <body onload="changebg()"> <table border="0" align="center" cellpadding="0" cellspacing="0" i

随机推荐