精华内容
下载资源
问答
  • <div><p>AtFloatLayout 在h5移动端内容区域不能滚动 h5PC端能滚轮滚动 h5移动端网页不能滚动导致内容显示不全 <p>taro-ui 1.5.4 <p>Taro v1.2.4 <p>Taro CLI 1.2.4 environment info: System: OS: macOS High ...
  • h5移动端部门树展示

    2019-04-13 08:47:06
    h5移动端树列表
  • 主要为大家详细介绍了H5移动端适配,Flexible方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • H5 移动端适配

    2019-09-17 08:56:54
    H5移动端适配前言一、案例说明二、移动端适配的两大要素三、完整代码 前言 移动端的适配是前端开发者必须考虑的一个问题,适配问题也是响应式问题,那么如何开发一个响应式的H5移动端应用?即在不同的设备下元素大小...

    前言

    移动端的适配是前端开发者必须考虑的一个问题,适配问题也是响应式问题,那么如何开发一个响应式的H5移动端应用?即在不同的设备下元素大小与间距会有不同的变化。今天就给大家分享这个问题。

    一、案例说明

    蘑菇街:
    看一下蘑菇街网站是如何做适配的。下面分别截图了屏幕宽为375(iPhone6/7/8)和414(iPhone6p/7p/8p)的适配情况。
    在这里插入图片描述
    在这里插入图片描述

    二、移动端适配的两大要素

    1. rem单位

      默认字号:
      rem 单位是相对于根节点 html 字体大小的相对单位。谷歌浏览器默认字体大小为16px,即1rem = 16px;2rem = 32px。当然也可以自己设置 html 的字体大小。比如设置了 20px。html:{font-size:20px},那么1rem = 20px;2rem = 40px。

      最小字号:
      那么能否设置为10px,这样 rem 与 px 就呈现 10 倍关系,也比较好计算?答案是不行。因为谷歌浏览器有最小单位字体为12px,所以即使设置了10px,也是按照12px计算。有些项目为了计算方便,会直接将 html 字体设置为 100px;那么1rem = 100px,2rem = 200px;呈现100倍的关系。

      基准字号:
      以 iphone6/7/8 (也就是物理像素为750,逻辑像素为375)的屏幕为基准。那么物理像素750,整个屏幕的宽度就是750,缩小100倍就是7.5rem。375/7.5=50px,即 html 字号为50px。但是仅设置成50px就够了吗?这样在大屏幕上字体还是很小。所以需要用到动态计算。

    2. 动态计算
      动态计算就是在不同的屏幕下 html 的字号也不相同。
      动态计算如下所示:

      <script>
          var windowWidth=document.documentElement.getBoundingClientRect().width;
          windowWidth=windowWidth>770?375:windowWidth;
          var fontSize=windowWidth/7.5;
          document.documentElement.style.fontSize= fontSize+ 'px';
      </script>
    

    html 字号等于屏幕宽度/7.5,当屏幕宽度大于 770 时,也就是超过 ipad 宽度时,则显示为 375 的屏宽效果。

    1. 实现思路
      首先 rem 单位决定了整个页面的相对布局;其次通过动态设置 html 根元素 font-size属性,使得页面整体布局随屏幕变化而变化。

    三、使用示范

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />
        <title>React App</title>
      </head>
      <style>
      #root{
          width:1rem;
          height:1rem;
          background:pink;
          font-size: 0.22rem;
       }
      </style>	
      <body>
        <div id="root">
            我会随屏幕宽度的变化而变化
        </div>
      </body>
      <script>
          var windowWidth=document.documentElement.getBoundingClientRect().width;
          windowWidth=windowWidth>770?375:windowWidth;
          var fontSize=windowWidth/7.5;
          document.documentElement.style.fontSize= fontSize+ 'px';
    </html>
    

    屏幕宽度为 iphone6/7/8(375像素)的效果。宽高为375/7.5 = 50.025px。
    在这里插入图片描述
    屏幕宽度为 iphone6/7/8 plus(414像素)的效果。宽高为414/7.5 = 55.2px。
    在这里插入图片描述

    展开全文
  • 仿京东商城H5移动端App,其中首页轮播无缝切换以及活动倒计时,以及分类页有关的html、css及相关js代码。
  • h5移动端的完美适配

    2019-08-10 06:23:10
    未来肯定是移动端的天下,接下来谈谈h5移动端的布局问题,目前有三种 1、百分比布局 ----->有点兼容性好,缺点布局的时候需要计算比较麻烦,不过可以采取工具或脚本实现。
  • H5移动端附件下载

    千次阅读 2020-03-12 17:22:18
  • 今天小编就为大家分享一篇vue h5移动端禁止缩放代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要为大家详细介绍了H5移动端图片压缩上传开发流程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 今日头条H5移动端APP页面,开发的H5的移动应用提供便捷的前端,内容为APP页面模板不含后台的Html+Css+js页面,方便直接套用样式,做的非常漂亮
  • H5移动端rem自适应方案

    千次阅读 2017-07-19 19:07:00
    H5移动端rem自适应方案

    笔记:

    具体物理像素、设备像素的意义和比值,地址:http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

    ---------------------------------------------------------------------------

    以UI图750为例。

    第一种方案:(单位:px)固定基准值为2,就是固定除以2,宽度用flex布局或百分比布局。

    需要写:<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    例如:UI图上一个块元素为600px,css写的时候这个div的高度为300px;


    第二种方案:(单位:rem)淘宝的flexible.js;(下载地址:https://github.com/amfe/lib-flexible/blob/master/src/flexible.js),css用less编译;

    不需要写:<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    在html里面引入flexible.js

    <link rel="stylesheet" type="text/css" href="css/flexible2.css"/>

    按照实际的750的尺寸标注,UI图上一个块元素为600:

    在less文件里,定义基准值:@size:75;



    第三种方案:(单位:rem),媒体查询@media在不同的屏幕宽度下,设定不同的font-size:

    需要写:<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    例如:UI图上一个块元素为600px,css写的时候这个div的高度为    600/2(dpr基准值)/20(媒体查询比值);

    html文件引入common.css

    /*common.css*/
    /*比值为1:20       1rem = 20px*/
    @charset "utf-8";
    body,ul,p,h1,h2,h3,dl,dt,dd,li,input,textarea,button{
      margin:0;
      padding:0;
      word-break:break-all;
    }
    body{
      text-align:left;
      font-family:'苹方',Helvetica,'微软雅黑',Arial,sans-serif;
      font-size-adjust:none;
      -webkit-text-size-adjust:none;
      color: #454545;
    }
    ul,li,dl,dt,dd{
      list-style:none;
    }
    a,a:visited{
      text-decoration:none;
      color:#666;
    }
    em,var{
      font-style: normal;
    }
    *{
      -webkit-tap-highlight-color:rgba(0,0,0,0);
    }
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
    input::-webkit-outer-spin-button {
      -webkit-appearance: none;
    }
    input[type='button'] {
      -webkit-appearance:none; /*去除input默认样式*/
    }
    ::-webkit-input-placeholder { /* WebKit browsers */
      color:#aeaeae;
    }
    ::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color:#aeaeae;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color:#aeaeae;
    }
    ::-ms-input-placeholder { /* Internet Explorer 10+ */
      color:#aeaeae;
    }
    input{
      outline:none;
    }
    input[disabled="true"]{
      background-color:transparent;
    }
    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px transparent inset;
    }
    input,textarea,select{
      -webkit-appearance: none;
      background-color: #fff;
      border: none;
    }
    body {
      background-color: #F2F2F2;
      overflow-x:hidden;
    }
    html {
      font-size: 107%;
    }
    @media only screen and ( min-width: 320px) {
      html {
        font-size: 107%!important;
      }
    }
    @media only screen and ( min-width: 360px) {
      html {
        font-size: 120%!important;
      }
    }
    @media only screen and ( min-width: 375px) {
      html {
        font-size: 125%!important;
      }
    }
    @media only screen and ( min-width: 414px) {
      html {
        font-size: 138%!important;
      }
    }
    @media only screen and (min-width: 480px){
      html{
        font-size: 160%!important;
      }
    }
    @media only screen and (min-width: 540px){
      html{
        font-size: 180%!important;
      }
    }
    @media only screen and (min-width: 600px) {
      html {
        font-size: 200%;
      }
    }
    @media only screen and (min-width: 640px){
      html{
        font-size: 213%;
      }
    }
    @media only screen and (min-width: 720px) {
      html{
        font-size: 240%;
      }
    }
    html,body{
      height: 100%;
    }
    /*  全局隐藏CLASS */
    .hide{display: none;}
    .clearfix:after {
      clear:both;
      height:0;
      overflow:hidden;
      display:block;
      visibility:hidden;
      content:".";
    }
    

    ----------------------------------------------------------------------------分割线----------------------------------------------------------------------------

    以上,仅个人做笔记使用,若有错误请指正。


    展开全文
  • H5移动端开发

    2017-07-03 15:40:30
    h5移动开发一点小小的感慨: (1)H5移动开发纯mui在安卓低端机还是很卡的,vue+mui还是不错的;...(5)webGL据说在目前很多H5移动端开发兼容性不好,做三维立体动画的需要注意啦。。。。 (6)给大家
    h5移动开发一点小小的感慨:

    (1)H5移动开发纯mui在安卓低端机还是很卡的,vue+mui还是不错的;

    (2)RN绝对是最好的,但是成本似乎没想象的省钱啊;
    (3)有些功能H5替代不了原生;
    (4)angular做移动端,个人认同,框架有点大,为什么不用原理相似的vue代替呢?

    (5)webGL据说在目前很多H5移动端开发兼容性不好,做三维立体动画的需要注意啦。。。。
    (6)给大家分享一个h5移动开发优化方案的网站,说实话,方案是完美的,但是有些东西改用的还是用。所以说还是选一个合适的框架才是根本
      附优化链接:给大家分享一个h5移动开发优化方案的网站,说实话,方案是完美的,但是有些东西该用的还是用。所以说还是选一个合适的框架才是根本 http://isux.tencent.com/h5-performance.html

    展开全文
  • H5移动端远程调试

    2019-08-25 00:33:08
    前端分享-H5移动端调试 背景 H5页面在PC上调试起来很方便,但是在手机上却很麻烦,此时移动端就像一个黑匣子,查看或修改DOM、CSS,localStore等变的很困难。 这个时候远程调试就孕育而生了。 weinre 什么是weinre ...
  • H5移动端知识总结

    2017-09-14 15:54:05
    很粗暴很全面的h5移动端知识总结:http://www.cnblogs.com/tugenhua0707/p/5180841.html
  • 基于mui写的H5移动端全国地区三级联动菜单,使用静态全国省市地区资源,加载速度快,亲测可用欢迎下载。
  • H5移动端附件下载1. 使用 window.open() 进行下载window.open(file.fileUrl)2. 使用 a 标签创建隐藏的可下载链接let ele = document.createElement('a')ele.download = file.fileNameele.style.display = 'none'ele....
  • 移动要素在openlayers中使用Translate类 ,但是在H5移动端不兼容,于是自己实现了下: 代码: let flag = false let features = null this.$refs.rootMap.ontouchstart = (evt) => { console.log('...
  • H5移动端ios/Android兼容性总结

    千次阅读 2019-07-05 11:17:11
    h5移动端ios/android兼容性总结
  • 本文主要和大家分享H5移动端页面加入canvas可滑动代码条件下android手机点击input重复弹出键盘,在移动端页面使用canvas的动画,为了实现动画的触摸滑动,会加入createjs.Touch.enable(stage, true, false)这条语句...
  • 商城H5移动端模板

    2019-01-03 15:36:13
    移动端h5商城,感兴趣的可以拿去学习,有更好的改动欢迎留言
  • h5移动端手机长按事件

    千次阅读 2019-01-06 15:33:05
    h5移动端手机长按事件 &lt;div style="width:100%;"&gt; &lt;div id="touchArea" style="width:90%; height:200px; background-color:#CCC;font-size:100px"&gt;...
  • h5移动端左右联动分类页面 查看演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=...
  • 功能较全的移动端商城H5,包括登陆,注册,首页,分类,列表,商品详情,购物车,个人中心,订单中心等等一系列的移动端商城
  • H5 移动端调取手机相机或相册

    千次阅读 2020-07-08 11:57:59
    H5 移动端调取手机相机或相册 1、html代码如下: <!--图片二--> <label for="xFile2" style="padding-top:15px;" class=" cameraImg2" @click="removeImg2();"> <span v-if="imgList2.length == '...
  • H5移动端知识点总结

    2017-07-31 15:36:38
    H5移动端知识点总结 阅读目录 移动开发基本知识点calc基本用法box-sizing的理解及使用理解display:box的布局理解flex布局Flex布局兼容知识点总结 移动开发基本知识点 一. 使用rem作为单位 ...
  • 前段时间接触了h5移动端的开发,移动端字体大小不同于pc端一般直接用px单位,而是经常用rem作为基础单位,常规做法使用1rem=100px的换算方式,如果设计稿是375px作为整个屏幕端度的话,那么我们换算过的屏幕宽度则为...
  • H5移动端登录界面 分享个人在学习前端过程中自己做的移动端的登录和和注册界面,部分内容参考大佬写的样式。如果有更好的建议或者有错误的地方希望各位大佬留言、评论。谢谢大家 html代码 下面是登录界面的HTML代码 ...
  • h5移动端下拉刷新,上拉加载一、下拉刷新二、上拉加载 一、下拉刷新 代码如下(示例): var servepage = 1;//当前页数 var totalpage = 0;//总页数 需要自行查询赋值 var isload = false; var pageY = null, endY ...
  • H5移动端登录界面 分享个人在学习前端过程中自己做的移动端的登录和和注册界面,部分内容参考大佬写的样式。如果有更好的建议或者有错误的地方希望各位大佬留言、评论。 html代码 下面是注册界面的HTML代码 <!...
  • H5移动端事件

    2021-01-08 20:47:57
    1、移动端、PC端常用事件对比 方式 PC端 移动端 点击 onclick 无 按下 onmousedown ontouchstart 移动 onmousemove ontouchmove 抬起 onmouseup ontouchend PC 端 1). 用on来添加touch事件在谷歌...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,026
精华内容 3,210
关键字:

h5移动端