淘宝适配 flexible.js

【淘宝适配 flexible.js】的更多相关文章

淘宝适配 flexible.js

1.引入阿里cdm文件,也可以自己下载下来引用,不需要在添加<meta name="viewport"">标签了 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> 2.运行后会发现头部添加了dpr和fontsize属性 <html data-dpr="2"…

引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的一种移动端适配方案,用来解决H5开发中的各个机型适配问题,是一种比较成熟的适配方案. 二.使用方法: 在html头部引入flexible.js,最好放在最头部,重构时使用rem替代px像素即可,flexible会做好所有适配.换算关系为1rem对应1/10设计尺寸,如ipone6设计尺寸为750px…

移动端适配flexible.js

npm install lib-flexible --save npm install px2rem-loader --save-dev…

nginx css,js合并插件，淘宝nginx合并js，css插件

先下载Nginx_concat_module,下载后把它放在/usr/local/src/文件夹中,新建文件夹nginx-http-concat把下载的config ngx_http_concat_module.c放到其中,到时候nginx需要指定该目录查看nginx之前的配置 /usr/local/nginx/nginx -V nginx version: nginx/ built by (Red Hat -) (GCC) TLS SNI support enabled configure…

学习用java基于webMagic+selenium+phantomjs实现爬虫Demo爬取淘宝搜索页面

由于业务需要,老大要我研究一下爬虫. 团队的技术栈以java为主,并且我的主语言是Java,研究时间不到一周.基于以上原因固放弃python,选择java为语言来进行开发.等之后有时间再尝试python来实现一个. 本次爬虫选用了webMagic+selenium+phantomjs,选用他们的原因如下: webMagic(v:0.73),一个轻量级的Java爬虫框架(git地址:https://github.com/code4craft/webmagic,主页地址:http://webmagi…

淘宝首页源码藏美女彩蛋(下)（UED新作2013egg）

我们已经知道,执行美女会得到"彩蛋",而正是彩蛋做到了taobaoUED展现给大家的神奇的前端魅力.今天我们来看看FP.egg&&FP.egg("%cjoin us%cshidu.mj@taobao.com");这行代码做了什么?FP.egg方法来自哪里?FP.egg方法的内部逻辑是什么? 二.彩蛋来自哪里? 打开taobao网的首页通过查看HTTP请求,可以发现仅js请求就21个,很过请求是多个js文件合并过的,粗略数数,淘宝首页的js文件超过60…

selenium 淘宝登入反爬虫解决方案（亲测有效）

前言目前在对淘宝进行数据爬取的时候都会碰到,登入时的滑块问题,无论是手动还是脚本都不成功.这里的很重要一个原因是很多的网站都对selenium做了反爬虫机制.接下来是笔者参考网上的网友们的方法亲自测试的一个方法,希望可以帮助到大家.注意这里使用的浏览器是Chrome.所以使用的驱动也是chromedriver 一,淘宝反扒js 在淘宝登入页面加载的js中,可以看到怎么一行代码,如下图: 上图的这一行代码就对selenium进行了检测.所以我们只需要修改驱动的改行代码就可以. 二,修改chrom…

手淘的flexible.js解决手机适配问题

如何使用flexible.js做手机适配做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewport('视口'),就是这段代码<meta name="viewport" content="width=device-width,initial-scale=1.0">,因为flexible是通过js动态改变meta标签,类似代码如下: var metaE…

手淘移动适配方案flexible.js兼容bug处理

什么是flexible.js 移动端自适应方案 https://www.jianshu.com/p/04efb4a1d2f8 什么是rem 这个单位代表根元素的 font-size 大小(例如元素的font-size).当用在根元素的font-size上面时 ,它代表了它的初始值(译者注:默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面中1rem的大小相当于…

rem适配布局（rem+less+媒体查询和 rem+flexible.js）

1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素的字体大小来说的 rem 是相对于 html 元素字体大小来说的 rem 优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制比如:根元素(html )设置的 font-size=12px:非根元素设置 width:2rem:则换成px 表示 24px(12px*2rem) 2. 媒体查询(@media) @media 可以针对不同的屏幕尺寸设置不同的样…

（淘宝无限适配）手机端rem布局详解（转载非原创）

从网易与淘宝的font-size思考前端设计稿与工作流本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 这是淘宝的github网址,里面有适配所需的js还有说明文档地址:https://github.com/amfe/lib-flexible 1. 问题的引出最近阅读白树的博文<移动web资源整理>时,他在博文中有一段指出,如果h…

从flexible.js引入高德地图谈起的移动端适配

曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢慢的到了有了统一的技术方案去落地实现. 从手写不同尺寸的媒体查询css到以手淘的flexible.js来进行移动端的适配,虽然过程曲折,不过效果也是十分的显著,因为有了成熟的体系以后.什么东西就有据可寻,适配也就没那么困难了. 但是,因为这次引入了高德地图,所以在适配上出现了一点意料之外的问题. 首…

（淘宝无限适配）手机端rem布局详解

从网易与淘宝的font-size思考前端设计稿与工作流本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 这是淘宝的github网址,里面有适配所需的js还有说明文档地址:https://github.com/amfe/lib-flexible 1. 问题的引出最近阅读白树的博文<移动web资源整理>时,他在博文中有一段指出,如果h…

手淘适配-flexible

目标拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目标很清晰,就是做一个这样的H5页面. 痛点虽然H5的页面与PC的Web页面相比简单了不少,但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备.看看下图你就会知道,这是多么痛苦的一件事情: 再来看看手淘H5要适配的终端设备数据: 看到这些数据,是否死的心都有了,或者说为此捏了一把汗出来. 手淘团队适配协作模式早期移动端开发,对于终端设备适配问题只属于Android系列,只不过很多设计师常常忽略An…

淘宝双十一页面（Flexible）demo

下面的代码是看了大漠使用Flexible实现手淘H5页面的终端适配做的一个demo. <!DOCTYPE html> <html lang="en" ng-app="sections"> <head> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable&qu…

vue2.0 类淘宝不同屏幕适配及px与rem转换问题

因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没商量. 举例子: 1.iphone6 2.iphone5 第一步:因为rem是根据更元素来计算大小,所以,捕捉到当前屏幕的大小并赋值给html,这是其一第二步:使用px2rem插件,来捕捉当前项目的所有px,直接计算相对应数值. 这样,以后写界面,就可以直接用px来构建界面,不用自己去计算啦! 好…

通过media媒体查询设置ie7/8样式、使用media判断各机型、手淘flexible.js

@media all and (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } @media (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } 其中all and可省略 @media print{ /*打印时设置的样式*/ body{ background:pink; } } 插曲: Lake Hill…

仿淘宝分页按钮效果简单美观易使用的JS分页控件

分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码附件中有完整例子的压缩包下载.已更新到最新版本先看效果图: 01输入框焦点效果 02效果模仿淘宝的分页按钮效果控件kkpager JS代码: var kkpager = { //divID pagerid : 'div_pager', //当前页码 pno : 1, //总页码 total : 1, //总数据条数 totalRecords : 0, //是否显示总页数…

摘自淘宝的js地区组件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

手把手教你写电商爬虫-第四课淘宝网商品爬虫自动JS渲染

版权声明:本文为博主原创文章,未经博主允许不得转载. 系列教程: 手把手教你写电商爬虫-第一课找个软柿子捏捏手把手教你写电商爬虫-第二课实战尚妆网分页商品采集爬虫手把手教你写电商爬虫-第三课实战尚妆网AJAX请求处理和内容提取老规矩,爬之前首先感谢淘宝公布出这么多有价值的数据,才让我们这些爬虫们有东西可以搜集啊,不过淘宝就不用我来安利了广大剁手党相信睡觉的时候都能把网址打出来吧. 工欲善其事,必先利其器,先上工具: 1.神箭手云爬虫, 2.Chrome浏览器 3.Chrome的插件…

JS仿淘宝详情页菜单条智能定位效果

类似于淘宝详情页菜单条智能定位对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"(要滚动的对象)距离页面顶部的高度,也就是说滚动的对象与窗口的上边缘接触时,立即将对象定位属性position值改成fixed(固定) (除IE6以外,因为IE6不支持fixed).对于IE6用绝对定位position:absolute,top:就是"游览器滚动的top".在 IE6下浏览看…

javascript项目实战之原生js模拟淘宝购物车

通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项目实战</title> <link rel="sty…

移动端适配方案 flexible.js

前言移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案,尽可能地让这种“意外”减到最少.没错今天的主角就是它“flexible.js” . flexible.js 之旅 flexible.js 的作用就是让你在不同的终端设备之间如鱼得水,如入无人之境.说得那么浮,一点感觉都没有.不急,我们慢慢来,一步一步走进 flexible.js 神秘的世界. fl…

JS实现选择菜单栏（配合慕课网淘宝搜索框的课程）

以下是关于实现慕课网淘宝搜索框的JS代码,不过只有选择菜单栏(其余比较容易实现). <!doctype html> <html> <head>  <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>淘宝选择栏</title> <style type="text/…

JS五星级评分效果(类似与淘宝打分效果)

今天晚上研究下五星级评分效果,类似于淘宝后台评分效果,如下图所示: 思路: 当鼠标移到一颗星的时候判断当前的索引当前及当前的索引前面的星星亮起来每当移到任何一颗星星时候下面跟随提示 mouseout时候提示消失,移出时全部变灰.每当点击一颗星星时候同样判断当前的索引当前及当前之前的星星都亮起来,mouseout时候点击时候的星星(亮) 同样保持亮的状态. HTML代码如下: <div class="star"> <span>js星级评论打分&…

js实现百度，淘宝搜索功能

Common.js //封装类名 function byClassName(sClassName){ if(document.getElementsBYClassName){ return document.getElementsByClassName(sClassName); } else { var allTagsName = document.getElementsByTagName('*'); var result = []; for(var i = 0; i<allTagsNa…

js之选项卡效果(淘宝侧边栏)

HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <ul class="nav_list"…

纯js轮播图练习-3，类似于淘宝海报带小圆点轮播图

基于js和css,跟着网上的视频教程,结合自己想要的效果,做出了一个类似于淘宝海报的效果. 如图:淘宝首页自己做的: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lunbo3</title> <style type="text/css"> *{ margin: 0; padding: 0; } li…

模仿淘宝首页写的高仿页面，脚本全用的原生JS，菜鸟一枚高手看了勿喷哈

自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : //for carousel1 function carouselOne(){ var parent=document.getElementById("parent"); var viewport1=document.getElementById("viewport1"…

JS 仿淘宝幻灯片非完整版小案例

仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta htt…