H5-移动端适配
之前写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-移动端适配的更多相关文章
- 手淘H5移动端适配方案flexible源码分析
移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...
- 整理h5移动端适配方案
<使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...
- 超详细讲解H5移动端适配
前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...
- Flexible实现H5移动端适配小demo
前言 看了宇哥关于移动端适配的分享后,加上目前公司项目也需要做移动端适配,今天就抽空搞了搞.目前业界还是比较推崇手淘使用"rem+viewport"的解决方案,今天自己模仿手淘fl ...
- h5 移动端适配方案思考
基础概念 CSS像素(CSS pixels) 这个是浏览器使用的抽象单位,用来精确度量网页上的内容.平时经常写的width:100px;height:100px;都是与设备无关的. 设备独立像素(de ...
- H5移动端适配方案-rem
为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致. rem:rem 是css3的一种相对单位,参考是根元素HMTL的fon ...
- H5移动端手势密码组件
项目简介 最近参加了2017年360前端星计划,完成了一个有趣的UI组件开发大作业,借机和大家分享一下移动端开发的技术啦~~ 本项目采用原生JS和Canvas实现移动端手势密码组件,支持手势密码设置和 ...
- H5 APP 页面移动端适配方案
H5 APP 页面移动端适配方案 https://segmentfault.com/a/1190000011586301 https://juejin.im/post/5cbdee71f265da03 ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
- 移动端适配--flexible.js
引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...
随机推荐
- 【UOJ139】【UER #4】被删除的黑白树
题意: 很久很久以前,有一棵树加入了 UOJ 群. 这天,在它讨论“一棵树应该怎么旋转”的时候一不小心被删除了,变成了被删除的树. 突然间,它突然发现它失去了颜色,变成了一棵纯白的树.这让它感觉很焦躁 ...
- HDU 5901 Count primes( Meisell-Lehmer算法模板 )
链接:传送门 题意:计算 [ 1 , n ] 之间素数的个数,(1 <= n <= 1e11) 思路:Meisell-Lehmer算法是计算超大范围内素数个数的一种算法,原理并不明白,由于 ...
- bzoj 2834: 回家的路
题目 F.A.Qs Home Discuss ProblemSet Status Ranklist Contest 入门OJ ModifyUser DCOI Logout 捐赠本站 Notice:1 ...
- [bzoj 2726] 任务安排 (斜率优化 线性dp)
3月14日第三题!!!(虽然是15号发的qwq) Description 机器上有N个需要处理的任务,它们构成了一个序列.这些任务被标号为1到N,因此序列的排列为1,2,3-N.这N个任务被分成若干批 ...
- 01.Python基础-5.函数
1 函数的介绍 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 内置函数 自定义函数 2 函数的定义和调用 2.1 函数的定义和调用 定义 def 函数名([参数]): 代码块 [ ...
- 【hihocoder 1308】搜索二·骑士问题
[题目链接]:http://hihocoder.com/problemset/problem/1308 [题意] [题解] 用bfs处理出3个骑士到每个点的最短路; 然后枚举最后3个骑士到了哪一个点. ...
- HDU5979 Convex
/* HDU5979 Convex http://acm.hdu.edu.cn/showproblem.php?pid=5979 计算几何 三角形面积公式 * * */ #include <cs ...
- CAD教程--嵌入表格
1.第一步,打开excel复制一下表格 2.第二步,打开CAD,选择编辑->选择性粘贴->autocad图元,左键点击一下图就行了,找找图,放大到适合的比例就行了.
- structs中通过LabelValueBean构建下拉列表
Action类中增加列表 List<LabelValueBean> list = new ArrayList<LabelValueBean>(); list.add(new L ...
- 树莓派与window 10组成的物联网核心:让人失望
去年春天,微软公布了自己的window系统与物联网系统的方案,该方案使用树莓派和window 10组成物联网的核心.树莓派是一个与window全然不同的执行在ARM构架下的系统. 是的,也许微软决心离 ...