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是淘宝公开的 ...
随机推荐
- tsar采集数据原理
系统模块 cpu 字段含义 user: 表示CPU执行用户进程的时间,通常期望用户空间CPU越高越好. sys: 表示CPU在内核运行时间,系统CPU占用率高,表明系统某部分存在瓶颈.通常值越低越好. ...
- Codeforces Round #468 (Div. 2, based on Technocup 2018 Final Round)A. Friends Meeting
Two friends are on the coordinate axis Ox in points with integer coordinates. One of them is in the ...
- Bonjour/Zeroconf with Arduino
转自:http://gkaindl.com/software/arduino-ethernet/bonjour Bonjour/Zeroconf with Arduino DownloadVersio ...
- node中exports和module.exports的关系及使用
在node中,需要记住,在使用exports和module.exports的时候,实际输出的是module.exports. exports指向module.exports,是module.expor ...
- LINUX 中 VSFTPD安裝
VSFTPD 简写:vsftpd是very secure FTP daemon 的缩写,是一个完全免费的,开源代码的ftp服务器软件 特点:vsftpd是一款在LINUX发行版中最受推崇的FTP服务器 ...
- Java开源框架 iBase4J 搭建笔记
项目地址:https://gitee.com/iBase4J/iBase4J 搭建步骤: 1.git 代码 2.安装 Zookeeper 3.打包部署 Dubbo Admin ...
- yii rbac管理
以下是Controller代码 <?php /** * Created by PhpStorm. * User: zhoukang * Date: 2017/6/11 * Time: 19:31 ...
- BAT常问问题总结以及回答(问题汇总篇)
几个大厂的面试题目目录: java基础(40题)https://www.cnblogs.com/television/p/9397968.html 多线程(51题) 设计模式(8点) JVM(12题) ...
- Android 利用TimerTask实现ImageView图片播放效果
在项目开发中,往往 要用到图片播放的效果.今天就用TimerTask和ImageView是实现简单的图片播放效果. 当中,TimerTask和Timer结合一起使用.主要是利用TimerTask的迭代 ...
- phpStorm中ftp的配置与使用,支持配置多个
小结:很方便,支持ftp功能和比较. 扩展,可以查看远程文件和日期 配置多个ftp