之前写H5页面也会遇到适配问题, 是通过媒体查询一点一点调整,始终觉得很繁琐,但一直也没去想想解决的办法.

  今天专门花了一上午的时间来去研究.  小生只是刚踏入前端路的小白,对于网上各位大佬的讲解适配理解起来还是挺费劲.....

  但还是找到了一篇简单的解决方案, 参考链接: https://blog.csdn.net/starstasts/article/details/78712328(十分感谢);  

 !function(b, a){
var c = b.documentElement;
a = function() {
var a = c.clientWidth;
a && (c.style.fontSize = a/375 * 100 + "px")
};
window.addEventListener("orientationchange" in window ? "orientationchange" : "resize", a, !1);
b.addEventListener("DOMContentLoaded", a, !1)
}(document, window);

  这种方法通过检测, 动态改变根元素 font-size的大小, 达到适配;

  通过测试,感觉适配效果还是可以的,

  目前就先这样处理, 闲下来在去理解实践其余的方法.

  

H5-移动端适配的更多相关文章

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

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

  2. 整理h5移动端适配方案

    <使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...

  3. 超详细讲解H5移动端适配

    前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...

  4. Flexible实现H5移动端适配小demo

    前言 看了宇哥关于移动端适配的分享后,加上目前公司项目也需要做移动端适配,今天就抽空搞了搞.目前业界还是比较推崇手淘使用"rem+viewport"的解决方案,今天自己模仿手淘fl ...

  5. h5 移动端适配方案思考

    基础概念 CSS像素(CSS pixels) 这个是浏览器使用的抽象单位,用来精确度量网页上的内容.平时经常写的width:100px;height:100px;都是与设备无关的. 设备独立像素(de ...

  6. H5移动端适配方案-rem

    为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致. rem:rem 是css3的一种相对单位,参考是根元素HMTL的fon ...

  7. H5移动端手势密码组件

    项目简介 最近参加了2017年360前端星计划,完成了一个有趣的UI组件开发大作业,借机和大家分享一下移动端开发的技术啦~~ 本项目采用原生JS和Canvas实现移动端手势密码组件,支持手势密码设置和 ...

  8. H5 APP 页面移动端适配方案

    H5 APP 页面移动端适配方案 https://segmentfault.com/a/1190000011586301 https://juejin.im/post/5cbdee71f265da03 ...

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

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

  10. 移动端适配--flexible.js

    引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...

随机推荐

  1. python指定日期后加几天判断

    #!/usr/bin/python import datetime import sys arg1_list=list(sys.argv[1].split(',')) arg2_list=list(s ...

  2. geohash 算法原理及实现方式

    转自:http://www.cnblogs.com/dengxinglin/archive/2012/12/14/2817761.html geohash 算法原理及实现方式 1.geohash 特点 ...

  3. 训练1-o

    给出2个N * N的矩阵M1和M2,输出2个矩阵相乘后的结果. Input 第1行:1个数N,表示矩阵的大小(2 <= N <= 100)第2 - N + 1行,每行N个数,对应M1的1行 ...

  4. [网络流24题] 太空飞行计划问题 (最大流->最大权闭合图)

    洛谷传送门 LOJ传送门 做这道题之前建议先看这篇论文,虽然论文里很多地方用了很多术语,但hbt神犇讲得很明白 这篇题解更加偏向于感性理解 把问题放到二分图上,左侧一列点是实验,权值为$p[i]$,右 ...

  5. BZOJ 4951 [WF2017]Money for Nothing (决策单调优化DP+分治)

    题目大意:略 题目传送门 不愧是$World final$的神题,代码短,思维强度大,细节多到吐..调了足足2h 贪心 我们利用贪心的思想,发现有一些工厂/公司是非常黑心的 以工厂为例,对于一个工厂$ ...

  6. 基于 SpringMVC——web.xml基本配置

    <!--声明应用范围内的初始化参数--> <context-param> <param-name>contextConfigLocation</param-n ...

  7. Python设计模式--单例模式(懒汉式)

    1. 单例模式 --> 单一(唯一)的实例. 在整个运行时间内, 内存中只有一个对象, 一般该对象涉及网络,资源等操作. 2. 单例模式一般分为懒汉式和饿汉式 懒汉式内存占用更加合理. 3. 调 ...

  8. deep learning 经典网络模型之Alexnet、VGG、Googlenet、Resnet

    CNN的发展史 上一篇回顾讲的是2006年Hinton他们的Science Paper,当时提到,2006年虽然Deep Learning的概念被提出来了,但是学术界的大家还是表示不服.当时有流传的段 ...

  9. 【hdu 6438】Buy and Resell

    [链接] 我是链接,点我呀:) [题意] 有一个物品的价格在1..n这些位置各不相同. 你初始有无限的钱. 问你从1走到n. 你每次可以选择买入一个或者卖出一个该种物品(或啥都不做) 问你最后的最大利 ...

  10. Appium遇到问题:

    问题一:问题org.openqa.selenium.remote.UnreachableBrowserException: Could not start a new session. Possibl ...