手机端页面自适应解决方案-rem布局

rem布局

布局前插入原生js即可

 (function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;if(clientWidth>=640){docEl.style.fontSize = '100px';}else{docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);

还有弹性布局flex、百分比布局

百分比布局：

html {font-size: 62.5%; /* 10÷16=62.5% */
}
@media only screen and (min-width: 481px){html {font-size: 94%!important; /* 15.04÷16=94% */}
}
@media only screen and (min-width: 561px){html {font-size: 109%!important; /* 17.44÷16=109% */}}
@media only screen and (min-width: 641px){html {font-size: 125%!important; /* 20÷16=125% */}
}

rem布局bug-页面短暂闪烁或界面由小变大：

将body设置属性 style="visibility:hidden",待页面加载完后，设置属性 visibility:visible

2、手淘flexible页面适配

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

flexible是一个制作H5适配的开源库，需要在html中引入，可以直接使用阿里CDN：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

CSS处理器(SASS)

@function px2rem($px, $base-font-size: 75px) {@return ($px / $base-font-size) * 1rem;
}

参数$base-font-size: 75px，可以通过(psd文件的宽度/10)来计算。假如psd宽750，则$base-font-size为75px

//比如量取box宽为190，高为190，则代码：
.box {width: px2rem(190px);height: px2rem(190px);
}

转载于:https://www.cnblogs.com/szatpig/p/5580599.html

手机端页面自适应解决方案-rem布局相关推荐

移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
手机端页面自适应解决方案—rem布局进阶版
旧版rem布局 <手机端页面自适应解决方案-rem布局>, 此方案仅适用于移动端web 文章底部常见问题说明第四条,笔者已给出一个相当便捷的解决方案,欢迎留言交流.(2017/9/9) 该 ...
移动端(手机端)页面自适应解决方案—rem布局篇 1
动端(手机端)页面自适应解决方案-rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流 ...
html+手机自适应源码,手机端页面自适应解决方案—rem布局（进阶版，附源码示例）...
一年前笔者写了一篇 <手机端页面自适应解决方案-rem布局>,意外受到很多朋友的关注和喜欢.但随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案--rem ...
手机端页面自适应解决方案—rem布局
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...
移动端页面自适应解决方案—rem布局(进阶版)
之前的一篇<手机端页面自适应解决方案-rem布局>随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案--rem布局(进阶版) 该方案使用相当简单,把下面这 ...
移动端页面自适应解决方案—rem布局
移动端页面自适应解决方案-rem布局参考文章: (1)移动端页面自适应解决方案-rem布局 (2)https://www.cnblogs.com/Vayne-N/p/6903590.html 备忘一 ...
手机端页面自适应解决方案-收集
响应式是按照pc,pad,mobile 不同尺寸显示不同的布局内容,通过媒体查询. 自适应是手机端根据屏幕宽度做等比例的缩放. 参考 https://www.cnblogs.com/panxiangf ...
手机端页面自适应解决方案
rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) {var docEl = doc.documentElement, resizeEvt = ...

手机端页面自适应解决方案-rem布局

2、手淘flexible页面适配

flexible是一个制作H5适配的开源库，需要在html中引入，可以直接使用阿里CDN：

CSS处理器(SASS)

手机端页面自适应解决方案-rem布局相关推荐

最新文章

热门文章