zoukankan      html  css  js  c++  java
  • 移动端适配方式

    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适配;

  • 相关阅读:
    es6学习笔记
    vue.js项目目录结构说明
    js 数组操作总结
    js 数组去重方法
    HTTP协议三次握手过程
    MVC与MVVM模式对比
    谱面编辑器
    LL谱面分析和难度标定
    SLP的模块结构
    LL基本姿势
  • 原文地址:https://www.cnblogs.com/SunShineM/p/6011358.html
Copyright © 2011-2022 走看看