lib-flexible H5用,PC不用

2024-11-05

使用Flexible实现手淘H5页面的终端适配(转)

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目

移动 H5（PC Web）前端性能优化指南

原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_member=MzFiZGQwMmUwMGNjYjNlYmJkMWY4MmZjMTY4MjdlZmY%3D%0A 移动 H5 (PC Web)前端性能优化指南概述 PC 优化手段在 Mobile 侧同样适用在 Mobile 侧我们提出三秒种渲染完成首屏指标基于第二点,首屏加载 3 秒完成或使用 Loadin

社交系统/社群系统“ThinkSNS+”H5及PC端终于来了！一起来“找茬”

[什么是TS+?] ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+,简称TS+. 还记得2017年4月20日么?那是我们社交系统TS+的APP开启内测的日子,时间过得太快,已经一个月有多不要伤心,今天我们有好多好多好消息要公布,已经激动得不知道先说哪一个了好消息一.社交系统ThinkSNS最新版本ThinkSNS+(TS+)的PC及H5端将于5月31日正式启动内测,即日起开始报名哦,参与方式见

关于H5从PC端切换到移动端，屏幕显示内容由横向转为竖向的研究！

1.前言: 在项目中,我们常会遇见在手机端需要横屏观看的效果,而在pc端则默认切换到竖屏的样式. 或者是,UI提供的图是一个长图,但是在移动端我们需要让这个图在手机横屏时显示. 以上两个都需要我们实行一个框的自行切换方向,这个该如何实现呢? 2.解决方案我们把所有需要切换方向的内容,都放在一个盒子里面,让这个最外面的盒子实现自动切换方向,里面的内容即可自动实现切换方向! <!DOCTYPE html> <html lang="en"> <head

Error: Could not symlink lib/pkgconfig/python-3.6.pc

Mac安装python3的时候出如上错误解决办法: 安装python3的时候就是输入python3死活没有反应 input sudo chown -R $USER /usr/local/lib/pkgconfig 即可!

微信H5或PC支付常见问题汇总

1.H5端调起支付,直接提示[支付失败],打印具体的信息,“<当前URL不存在>” 原因: ①.[支付授权目录不对]---查看微信商户平台的支付授权目录的地址,如果MVC结构的,则只需填写上一级即可,如:http://m.longuuhotel.com/wap/order/topay(这个是jsapi.bread.php支付页面的控制器URL),改成不要"topay"即可.http://m.longuuhotel.com/wap/order/ 注意:得以反斜杠结束.

H5 canvas pc 端米字格写字板

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo02 pc端米字格画布</title> <link rel="stylesheet" href="css/canvas.css"> <script src="scripts/jque

H5和PC实现点击复制当前文字的功能，兼容ios,安卓

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

10天学会phpWeChat——第七天：创建一个自适应PC网站+H5移动端的模块

本教程基于phpWeChat核心框架1.1.0+版本.下载地址:http://s.phpwechat.com/app_38026ed22fc1a91d92b5d2ef93540f20 通过前面六讲的系列教程,我们完成了一个包含后台的文章管理模块.但,phpWeChat的初衷并不仅限于此,帮您迅速创建一个PC网站+微信公共号才是满足时代需求的模块. 今天,我们开始<10天学会phpWeChat>的第七讲:创建一个自适应PC网站+H5移动端的模块. 还以我们一开始创建的hello world模块为

手淘H5移动端适配方案flexible源码分析

移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正在使用的适配方案. 这个适配方案是lib-flexible,在看这个源码的同时,我想先来回顾一下几个概念: 1. viewport 在移动设备上,viewport是设备屏幕用来显示我们网页的那一块区域,或者说是浏览器(或者Hybird App内的webview)用来展示我们网页的那部分区域,vie

h5移动端flexible源码适配终端解读以及常用sass函数

;(function(win, lib) { var doc = win.document;// win = window,lib = window.lib; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]');//这样的

微信支付（PC扫码支付和H5公众号支付）

最近在做微信支付,微信支付比较坑,官方居然只有.NET.C#.PHP的demo居然没有java的demo.然后微信支付是不提供测试账号的需要直接用正式的公众号.首先来介绍下微信扫码支付吧,微信扫码有两种方式,这里采用第二种方式统一下单(JSAPI).需要提前在微信公众号后台申请微信支付开通,具体的开通规则详细文档见点击打开链接其实微信支付挺简单的无非就是拼装参数给微信发送请求,要注意的几点就是支付的金额是分,微信没有同步回调地址,只有异步回调的地址.这样的话就不能实时反馈支付结果到PC端页面.

flexible.js 移动端自适应方案

一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档. (一),引用方式 1,引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js" >

移动端适配方案 flexible.js

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

有了这套flexible.js 移动端自适应方案，你就能在移动端的来去自如， (^__^)

flexible.js 移动端自适应方案一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档. (一),引用方式 1,引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,f

配合sublime使用flexible.js实现微信开发页面自适应

什么是flexible.js 是一个终端设备适配的解决方案.也就是说它可以让你在不同的终端设备中实现页面适配. 是一个用来适配移动端的javascript框架.根据宽度的不同设置不同的字体大小,样式间距都使用rem作为单位,不同屏幕大小适配不同的样式. 使用方式(这是阿里的CDN,如果其他链接一样可以) <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js">&

flexible.js + makegrid.js 自适应布局

一,flexible.js 的使用方式: (一),引用方式 1,引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script> 当前最新的版本是0.3.2. 2,下载flexible.js 等文件到项目指定目录下,然后在head中引入.建议对于js做内联处理,在所有资源加载之前执行这个js. 下面是淘宝的写法: <!

flexible.js 布局详解

原文链接:http://caibaojian.com/flexible-js.html 本文讲的通过flexible.js实现了rem自适应,有了flexible.js,我们就不必再为移动端各种设备兼容烦恼,flexible.js是如何通过rem实现自适应的呢?一起来看看:· 通过rem与px的换算,你可以把设计稿从px转到rem.再也不用为各种设备横行而担忧. rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.1rem=16px(浏览

H5实现手写功能

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> body,html{ margin: 0; padding: 0; height: 100%; } #canvas { border:0.01rem solid #f30; } #canvas-btn{ display: block; margin: 0;

【移动前端开发实践】从无到有（统计、请求、MVC、模块化）H5开发须知

前言不知不觉来百度已有半年之久,这半年是996的半年,是孤军奋战的半年,是跌跌撞撞的半年,一个字:真的是累死人啦! 我所进入的团队相当于公司内部创业团队,人员基本全部是新招的,最初开发时连数据库都没设计,当时评审需求的时候居然有一个产品经理拿了一份他设计的数据库,当时我作为一个前端就惊呆了...... 最初的前端只有我1人,这事实上与我想来学习学习的愿望是背道而驰的,但既然来都来了也只能独挑大梁,马上投入开发,当时涉及的项目有: ① H5站点 ② PC站点 ③ Mis后台管理系统 ④ 各种百度

AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页

原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货插件代码可以在这里找到. 注意,虽然是扫码体验,但是AlloyTouch.FullPage特意对鼠标滚轮事件进行了兼容,所以PC上的全屏滚动页面也可以使用它来快速制作. 使用姿势在设计全屏滚动插件的时候,希望开发者几乎: 不用写任何脚本快速生成精致H5 支持PC滚轮和移动触摸酷炫的转场动效灵活的时间轴管理一切皆可配置但是不写脚

lib-flexible H5用,PC不用

热门专题