首页 > 其他分享 >antui-alipay风格的移动网页设计

antui-alipay风格的移动网页设计

时间:2023-09-14 16:44:55浏览次数:49  
标签:alipay style 网页 antui px clientWidth docEl

地址:antui.alipay.com

需要加入的一些js 控制,见https://myjsapi.alipay.com/fe/preset-assets.html

参考代码:

<!DOCTYPE html>
<!-- A11Y:注意设置页面的 lang 属性 -->
<html lang="zh">
<head>
  <meta charset="utf-8" />
  <!-- A11Y:打开页面时,屏幕阅读器会首先阅读 title 的内容,确保 title 准确描述页面 -->
  <title>Examples</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
  <!-- A11Y:如果有无障碍方面的需求,建议使用下面的 viewport 设置,不要禁止页面缩放 -->
  <!--<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />-->
  <script>
    var docEl = document.documentElement;
    docEl.style.fontSize = 100 / 375 * docEl.clientWidth  + 'px';
    window.addEventListener('resize', function() {
      docEl.style.fontSize = 100 / 375 * docEl.clientWidth + 'px';
    });
  </script>
  <link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/dpl/antui.css"/>
  </head>
<body ontouchstart="">
  <!--你的html页面代码-->
</body>
</html>

  

标签:alipay,style,网页,antui,px,clientWidth,docEl
From: https://www.cnblogs.com/chinatefl/p/17702848.html

相关文章

  • python的flask框架部署网页过程报错及解决方案
    python安装好flask框架之后,创建一个flask的项目,运行发生以下报错UnicodeDecodeError:'utf-8'codeccan'tdecodebyte0xa1inposition4:invalidstartbyte原因是读取flask库源码的时候系统默认未使用‘utf-8’格式win10电脑->控制面板->区域->管理->更改系统区域设置......
  • React框架下如何集成H.265网页流媒体EasyPlayer.js视频播放器?
    H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,可支持H.264与H.265编码格式,性能稳定、播放流畅,能支持WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC等格式的视频流。在功能上,EasyPlayer支持直播、点播、录像、快照截图、MP4播放......
  • 在线CAD(H5网页CAD SDK)实现阵列功能
    前言在线CADSDK的集成过程中,甲方客户可能有阵列功能的需求,作为开发者如何利用WEBCADSDK展现此功能效果呢?本章节我们重点讲述一下。首先看一下在线CAD的DEMO:https://demo.mxdraw3d.com:3000/mxcad/,阵列功能如下图: 环境搭建首先按照mxcad入门文档(https://mxcadx.gitee.io/......
  • 不同小图标的编码网页中的大于号,小于号,应该用编码来代替,HTML中特殊字符和与之对应的A
    上面两个符号的HTML代码,>< >< 应用场景:当使用键盘无法打出来的时候。因为我测试在html代码中使用&amp;和&是等价的。带有实体名称的ASCII实体 常用的几个结果描述实体名称实体编号"quotationmark"&#34;'apostrophe&apos;&#39;&amper......
  • 网页设置A4大小
    在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(DotPerInch)指标。经过我仔细的测试,发现了网页打印中,默认采用的是96dpi,并非传闻的72dpi在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(DotPerInch)指标。经过我仔细的测试,发现了网页打印中,默认采用的是96dpi,并非......
  • react18-webchat网页聊天实例|React Hooks+Arco Design仿微信桌面端
    React18Hooks+Arco-Design+Zustand仿微信客户端聊天ReactWebchat。react18-webchat基于react18+vite4.x+arco-design+zustand等技术开发的一款仿制微信网页版聊天实战项目。实现发送带有emoj消息文本、图片/视频预览、红包/朋友圈、局部模块化刷新/美化滚动条等功能。使用技术......
  • Python - 网页自动化
    一、环境准备Selenium安装命令行安装pipinstallselenium浏览器驱动安装找到本地chrome的浏览器的版本查看谷歌浏览器的版本号下载相应版本的驱动器,chrome浏览器驱动下载地址:chromedriver.storage.googleapis.com/index.html下载完后,解压到本地的python的目......
  • 米联客 2024 版 FPGA 课程快速入口课程-目录速览(网页版没有页码)
    目录米联客2024版FPGA课程快速入口课程    101AMDFPGAvitis-vivado软件快速入门课程    91概述    92新建VIVADO工程    93添加代码管理文件夹    124添加PLLIP核    125新建工程文件    186完善RTL代码    227添加管脚约束......
  • web前端HTML中五种网页跳转的方法
    单自动跳转法对于表单大家都很熟悉,就是将表单中填写的内容,提交到action参数中指定的url地址中,目标url再对接收到的数据进行处理。利用这一点,我们可间接的实现网页跳转,只不过,我们并不需要提交任何表单内容。再结合javascript脚本,可以对表单进行自动提交。示例如下:cript>其中form1名......
  • PHP 网页扫码登录 , 推送模板消息
    缘由:因为老板要做个PC端的微信扫码绑定登录,关注公众号,推送模板消息的功能框架:ThinkPHP5功能:实现扫码微信公众号授权登录绑定,推送模板消息1.正式配置准备:微信公众号(必须申请了服务号) Appid, AppSecret配置:微信公众平台修改: 授权回调地址域名......