zoukankan      html  css  js  c++  java
  • 如何使用rem写自适应的手机端页面?

    主要使用了js控制

    /**
     * @description: rem缩放
     */
    (function () {
    	
    	
    	
        updateOrientation();
        var supportOrientation = (typeof window.orientation === 'number' &&
            typeof window.onorientationchange === 'object');
        if (supportOrientation) {
            window.addEventListener('orientationchange', updateOrientationDelay, false);
        } else {
            window.addEventListener('resize', updateOrientationDelay, false);
        }
    
        function updateOrientation() {
            var deviceWidth = document.documentElement.clientWidth;
            if (deviceWidth > 750) deviceWidth = 750;
            document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
        }
    
        function updateOrientationDelay() {
            setTimeout(function () {
                updateOrientation()
            }, 100);
        }
    }());
    

    再搭配一个reset.css

    就可以顺利开始了 这里设计稿是750的,视真实情况而定。

  • 相关阅读:
    struts2基础
    hibernate框架基础
    Django的模板层
    HBuilder无法连接夜神模拟器的解决办法
    Django的视图层
    Django的路由层
    Django简介
    http协议
    web应用
    Mongodb之增删改查
  • 原文地址:https://www.cnblogs.com/heson/p/11205416.html
Copyright © 2011-2022 走看看