博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端适配字体大小
阅读量:5902 次
发布时间:2019-06-19

本文共 755 字,大约阅读时间需要 2 分钟。

全局引入一下的js代码:

/* 适配字体大小 * docEl.style.fontSize = a * (clientWidth / b) + 'px'; * b为设计稿的宽 * a为在标准屏宽下rem的px值 * x为在设计稿上量得的px * 计算:x/b*b/a=>x/a * 使用:使用前,先按照设计稿宽值自定义b值,并尽量把a值定义为1,10,100等,以便计算 * */(function(doc, win) {    var docEl = doc.documentElement,    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',    recalc = function() {        var clientWidth = docEl.clientWidth;        if (!clientWidth) return;        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';    };    if (!doc.addEventListener) return;    win.addEventListener(resizeEvt, recalc, false);    doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);

然后字体或者宽高都可以使用rem作为单位,然后想适配不同的移动端

转载于:https://www.cnblogs.com/zengweuwu/p/10742066.html

你可能感兴趣的文章
贪吃蛇逻辑代码
查看>>
实现c协程
查看>>
ASP.NET视频教程 手把手教你做企业论坛网站 视频教程
查看>>
[LeetCode] Meeting Rooms II
查看>>
从Swift学习iOS开发的路线指引
查看>>
Scribes:小型文本编辑器,支持远程编辑
查看>>
ssh 安装笔记
查看>>
3-继承
查看>>
海归千千万 为何再无钱学森
查看>>
vue2.0 仿手机新闻站(六)详情页制作
查看>>
JSP----九大内置对象
查看>>
Java中HashMap详解
查看>>
delphi基本语法
查看>>
沙盒目录介绍
查看>>
260. Single Number III
查看>>
Hadoop生态圈-Kafka的完全分布式部署
查看>>
[MODx] Build a CMP (Custom manager page) using MIGX in MODX 2.3 -- 1
查看>>
jQuery自动完成点击html元素
查看>>
[算法]基于分区最近点算法的二维平面
查看>>
webpack多页应用架构系列(七):开发环境、生产环境傻傻分不清楚?
查看>>