ios H5 可以放大缩小 h5缩放代码

转载

mob64ca13fe62db 2023-11-19 09:08:12

文章标签 ios H5 可以放大缩小 rem.js 移动端 rem 自适应 html-font-size CSS3 rem布局 文章分类 iOS 移动开发

移动端网页 rem 自适应布局（rem布局用于解决各种移动端机型H5页面适配问题）

在各种屏幕大小手机上实现自适应效果，用rem单位，根据手机屏幕大小自动改变(包括横屏和竖屏时)：文字大小，图片大小，布局宽度大小等！

什么是rem？

rem是 css3一种新的长度单位。它是相对于html标签的字体大小的单位（注意这里泛指是相对于html中的根元素标签也就是html）。

一般用于在移动端H5页面中解决各种机型适配问题的。

为什么要用rem？

由于在移动端开发时，开发人员为了适配不同的机型，常用mediaQue(媒体查询)依据每种机型写多套适配代码，这种方法是能解决适配问题，但代码量太多了不利于维护。

所以就用rem来解决这个问题（当然现在有很多UI框架、js脚手架、插件等都有多端适配方案这里就不涉及了）。

rem的核心原理：

rem的本质是等比例缩放，一般是基于页面宽度，其核心就在刚打页面时，通过css、js等方式动态改变根元素html标签的font-size 字体大小样式属（因rem是以根元素html标签的font-size大小变化面变化的）。

这里我们是用js方式动态改变根元素html标签的font-size样式属性，这样页面就可以根

实例代码：

;(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) {
                return false;
            }
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            /*
            * 使用说明：
            * 750 表示：UI设计稿的宽度（移动端一般都以750为标准，当然这是根据你的设计稿宽是多少，这里就写多少）。
            * 100 表示：换算比例，这里写100是为了在根据设计稿写css样式时好计算（如，用PS测量某元素的宽度是100px，那样式就写为width: 1rem，如果是16px 就width: 0.16rem，如果是1px 就width: 0.01rem ）
            * rem不仅仅用于设置宽和高，它可以用来设置所有可设置的属性单位大小，如padding: 1.2rem; font-size: 1rem; border-radius: 0.5rem 等等;
            * */
        };
    if (!doc.addEventListener) {
        return false;
    }
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);