首页 > 移动平台 > 详细

移动端适配方式

时间:2016-10-29 18:40:00      阅读:247      评论:0      收藏:0      [点我收藏+]

1.动态改变viewport的值

引入:

<script type="text/javascript" src="ort.js"></script>
<script>

2.改变body的zoom值

<script>
function resetZoom(){
  var deviceWidth=document.documentElement.clientWidth;//获取设备宽度
  var scale=deviceWidth/640;//640是psd设计图宽度
  document.body.style.zoom=scale;
}
resetZoom();
window.onresize=function (){
  resetZoom();
}
</script>

3.

rem适配

<script>
function resetFont(){
  var HTML=document.getElementsByTagName(‘html‘)[0];
  var deviceWidth=document.documentElement.clientWidth;

    //获取设备宽度
  var scale=deviceWidth/640;//640是psd设计图宽度
  HTML.style.fontSize=100*scale+‘px‘;
}
resetFont();
window.onresize=function (){
  resetFont();
}
</script>

4.百分比

全换成百分比的方式

不建议使用,不太方便,最好用的还是rem适配;

 

移动端适配方式

原文:http://www.cnblogs.com/SunShineM/p/6011358.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!