移动端H5终端适配方案

1.JS的根据不同屏幕宽度动态设置html的font-size，使用rem布局。

a.手淘方案 flexible+rem（参考https://github.com/amfe/article/issues/17）

引入flexible.js，不需要在html结构中加入viewport标签。

flexible.js会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3；同时会给html加上对应的font-size的值，比如说75px；以及会添加viewport标签，JS会根据不同的设备添加不同的缩放比(建议内联处理，在所有资源加载之前执行这个JS)

例如：设计稿是750px宽度，将750px进行10等分，则1rem=75px,

如果设计稿中量出某块区域的margin-top值20px，对应换算成rem为20/75=0.266667rem。

css代码就是margin-top:0.266667rem。
一般用于解决 “数据大屏“ 展示的屏幕适配问题: 解决 “数据大屏“ 展示的屏幕适配问题

b.不引入第三方库，自写js动态设置html的font-size+rem

(function (doc, win) {var docEl = doc.documentElement,//根元素html
//判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {var clientWidth = docEl.clientWidth;
if (!clientWidth) return;//把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。　　　　　　docEl.style.fontSize = 16* (clientWidth / 375) + 'px';
};
//alert(docEl)
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
doc.addEventListener('DOMContentLoaded', recalc, false)//绑定浏览器缩放与加载时间
})(document, window);

js会根据不同设备的宽度设置html的font-size，html结构需要加入

屏幕根据设计稿的比例转换对应的rem值，比如：

750的设置 = 16*(clientWidth/375)

640的设置 = 20*(clientWidth/320)

320的设置 = 10*(clientWidth/320)

例如：设计稿是750px宽度（基于iphone6 375*2=750 得到的设计稿），如果设计稿中量出某块区域的margin-top值20px，

在实际iphone6设备375px宽度中，应该除以2，所以得到值mragin-top是20/2=10px,

因为1rem=16px（16*（iphone6设备宽度/375）+'px'）,所以对应换算成rem为10/16=0.625rem。

css代码中就是margin-top:0.625rem。

2.flex布局，不使用rem，直接使用px。

html结构需要加入

例如：设计稿是750px宽度，设计稿是750px宽度（基于iphone6 375*2=750 得到的设计稿），

如果设计稿中量出某块区域的margin-top值20px，

在实际iphone6设备375px宽度中，应该除以2，所以得到值mragin-top是20/2=10px。

css代码中就是margin-top:10px。

移动端H5终端适配方案相关推荐

教你如何用 lib-flexible 实现移动端H5页面适配
前话好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
移动端高清适配方案（解决图片模糊问题、1px细线问题）
移动端高清适配方案(解决图片模糊问题.1px细线问题) 参考文章: (1)移动端高清适配方案(解决图片模糊问题.1px细线问题) (2)https://www.cnblogs.com/superliz ...
移动端 H5页面适配
一.基础概念在了解如何做H5页面适配前,大家都应该把移动端涉及的一些概念搞明白,比如:dpr 是什么意思? 移动端H5解惑-概念术语(一) 二.为什么要做页面适配 2.1 PC端为什么要解决浏览器兼 ...
Web移动端最强适配方案总结，没想到这么好用！
点击上方的终端研发部,右上角选择"设为星标" 一.前言在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多 ...
移动端Web页面适配方案（整理版）
@(概述)[基本概念|百分比|rem|vw/vh|响应式设计] 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需 ...
移动/PC端的一些适配方案
一.多种屏幕(响应式) 响应式是一种在多种设备(比如pc端移动端)不同分辨率情况下使界面展现最大程度适应尺寸的手段.响应式包含了移动端适配,也可以使移动端不同分辨率展现不同样式.移动端适配则相对精准 ...
移动端H5活动页优化方案
背景项目:移动端H5电商项目痛点:慢!!! 初始方案:最基本的图片懒加载,静态资源放到cdn,predns等等已经都做了.但是还是慢,慢在哪? 显而易见的原因:由于前后端分离,所有的数据都由接口下 ...
淘宝——移动端页面终端适配
注:本文参考自:http://www.cnblogs.com/xianyulaodi/p/5533201.html 阅读目录适配的要求适配的方法,3个步骤适配中背景图片的处理适配的原理解析摘 ...
移动端h5视频处理方案
2019独角兽企业重金招聘Python工程师标准>>> 今天处理一个移动端h5的视频时被狠狠的打脸,果断在网上搜了好些文章狠补了一下,下面做一个记录,方便以后查看: H5移动端页面常 ...

移动端H5终端适配方案

移动端H5终端适配方案相关推荐

最新文章

热门文章