css适配移动端

本文介绍了移动端CSS适配的三种方法:Media Queries媒体查询、Flex弹性布局以及rem结合viewport缩放。特别提到了一段关于使用rem和vm以及calc实践的最佳CSS代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

'use strict';
(function(doc, win) {
    var docEl = doc.documentElement, // 获取html对象
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', // 横屏是否支持,不支持则为浏览器大小改变

        // 计算页面字体大小
        recalc = function() {
            // 获取页面宽度
            var clientWidth = docEl.clientWidth;
            // 获取不到页面宽度,直接返回
            if (!clientWidth) return;
            // 设置html字体大小(浏览器默认字体大小为16px)
            docEl.style.fontSize = clientWidth / 375 * 16 + "px";
        };
    // 不支持addEventListener,返回
    if (!doc.addEventListener) return;
    // 监听事件,获取当前html标签的字体大小
    win.addEventListener(resizeEvt, recalc, false);
    // dom内容加在完成事件
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);


移动端适配方法

  1. Media Queries媒体查询@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ /*你的css代码*/ }
  2. Flex弹性布局
  3. rem + viewport 缩放
// viewport也是固定的
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
// 通过以下代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)
!function (d) {
    var c = d.document;
    var a = c.documentElement;
    var b = d.devicePixelRatio;
    var f;

    function e() {
      var h = a.getBoundingClientRect().width, g;
      if (b === 1) {
        h = 720
      }
      if(h>720) h = 720;//设置基准值的极限值
      g = h / 7.2;
      a.style.fontSize = g + "px"
    }

    if (b > 2) {
      b = 3
    } else {
      if (b > 1) {
        b = 2
      } else {
        b = 1
      }
    }
    a.setAttribute("data-dpr", b);
    d.addEventListener("resize", function () {
      clearTimeout(f);
      f = setTimeout(e, 200)
    }, false);
    e()
  }(window);

下面这段CSS是最好的基于rem和vm和calc实践代码(转)

html {
  font-size: 16px;
}
@media screen and (min-width: 375px) {
  html {
    /* iphone6的375px尺寸作为16px基准, 414px正好18px大小*/
    font-size: calc(100% + 2 * (100vw - 375px) / 39);
    font-size: calc(16px + 2 * (100vw - 375px) / 39);
  }
}
@media screen and (min-width: 414px) {
  html {
    /* 414px-1000px 每100像素宽字体增加1px(18px-22px) */
    font-size: calc(112.5% + 4 * (100vw - 414px) /586);
    font-size: calc(18px + 4 * (100vw - 414px) /586);
  }
}
@media screen and (min-width: 600px) {
  html {
    /* 600px-1000px 每100像素宽字体增加1px(20px-24px) */
    font-size: calc(125% + 4 * (100vw - 600px) / 400);
    font-size: calc(20px + 4 * (100vw - 600px) / 400);
  }
}
@media screen and (min-width: 1000px) {
  html {
    /* 1000px以上每100像素宽字体增加0.5px */
    font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
    font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
  }
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值