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,也就实现了自适应的效果。

  • 相关阅读:
    idea安装破解
    项目中邮件发送
    (转)四种复制文件的效率高低
    备份
    关于时间
    转 累加含小数点的数据:parseFloat、toFixed等
    转 Java将PDF转换成图片
    (转)JAVA实现SFTP实例
    获取浏览器参数
    js 中日期转换
  • 原文地址:https://www.cnblogs.com/teamemory/p/9896384.html
Copyright © 2011-2022 走看看