zoukankan      html  css  js  c++  java
  • 如何解决各类尺寸移动端自适应的问题?

    前言;

    做移动端的同学都知道,移动端的尺寸参差不齐,那么如何才能实现各移动端情况下,都能很好地自适应尺寸大小呢?

    那就是rem这个单位!我们可以利用js来控制1rem在不同的移动端尺寸情况下对应不同的px(px是绝对单位)。

    实现方式:

    有兴趣的可以搜淘宝的flexible.js前端自适应解决实现方案,但是那个相对复杂一些,后期转换rem也不方便。

    那么,我推荐利用如下方式来进行实现移动端的自适应(貌似算网易的解决方案)。

    如何实现呢?很简单。代码如下:(这段代码适合于现在移动端按照宽度750来进行设计,也就iphone6的宽度)

    特别注意:

    引入该js文件(文件名,你自己取),要引入在css文件之前。

    (function () {
        var html = document.documentElement;
        var windowWidth = html.clientWidth;
        html.style.fontSize = windowWidth / 7.5 + 'px';
    })();
    //这段代码的目的是在你调试的切换屏幕的时候,实现响应式。但是项目中无需下面这个代码也可以
    window.onresize = function () {
        var html = document.documentElement;
        var windowWidth = html.clientWidth;
        html.style.fontSize = windowWidth / 7.5 + 'px';
    }

    如何使用:

    如果我们的设计稿都是利用750*1334这个尺寸来设计,那么我们利用设计稿的尺寸除以100,然后用rem做单位,就可以实现移动端的自适应!

    后记:

    rem的概念:rem 是html 的font-size大小,一般为 16px。

    我们就是用js来动态改变html 的font-size大小,从而改变了1rem对应的px,也就实现了自适应的效果。

  • 相关阅读:
    动态调用web服务
    组件设计实战--组件之间的关系 (Event、依赖倒置、Bridge)
    .NET平台下可复用的Tcp通信层实现
    推荐所有的.NET开发人员阅读《J2EE Development without EJB》
    关于跨程序集的反射(续)
    IoC与DI (转载)
    某公司的一道机考题的解答
    使用 EmptyClass 避免条件判断
    EsbAOP应用--权限管理
    企业(分布式)计算十大谬误
  • 原文地址:https://www.cnblogs.com/teamemory/p/9896384.html
Copyright © 2011-2022 走看看