`
learnmore
  • 浏览: 597298 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

html5 判断屏幕尺寸js动态设置rem基准值

 
阅读更多
<script>
// 该代码来自http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/
(function (doc, win) {
    // 分辨率Resolution适配
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
        };

    // Abort if browser does not support addEventListener
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
 
  // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
    (function(){
        return;
        var dpr = scale =1;
         var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {               
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下,仍旧使用1倍的方案
            dpr = 1;
        }
           scale = 1 / dpr;
           //
           var metaEl = "";
           metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    })();
       
})(document, window);   
</script>
分享到:
评论

相关推荐

    rem适配js文件flexible.js和echartPxToRem.js

    转换公式通常是:pxValue / htmlFontSize * remBaseValue,其中remBaseValue是开发者设定的基准rem值,通常与`flexible.js`设置的基础字体大小相匹配。 3. 最后,更新后的配置项被传递给ECharts实例,从而使得图表在...

    webapp之设计尺寸转css-rem尺寸

    5. **使用媒体查询**:对于不同的屏幕尺寸,可能需要调整基础字体大小,进而改变所有rem的计算结果。通过CSS媒体查询,我们可以针对特定的视口宽度设置不同的基础字体大小,实现更细致的适配。 6. **兼容性考虑**:...

    Js动态设置rem来实现移动端字体的自适应代码

    在这篇文章中,作者详细介绍了如何使用JavaScript(简称JS)动态设置rem来实现移动端字体的自适应。在移动前端开发中,字体自适应是非常关键的一个环节,它能保证不同尺寸的设备上网页文本的显示效果都令人满意。...

    移动端适配rem文件js代码.zip

    "移动端适配rem文件js代码.zip"这个压缩包就是针对这一需求提供的一种解决方案,它包含了一个名为“rem.js”的JavaScript文件,用于动态调整页面元素的大小,以适应不同分辨率和屏幕尺寸的手机或平板电脑。...

    rem详细使用案例

    这是因为移动设备的屏幕尺寸和像素密度差异较大,为了保证不同设备上的视觉一致性,我们通常会根据设备的宽度或者屏幕像素密度来动态设置`html`元素的字体大小。例如,使用媒体查询(media query): ```javascript...

    h5rem自适应框架

    }`,然后根据屏幕宽度动态调整这个值,确保不同屏幕尺寸下的元素比例正确。 2. **媒体查询**:利用CSS3的媒体查询(Media Queries),我们可以为不同屏幕尺寸设定不同的html字体大小。例如: ```css @media ...

    移动端使用rem布局那些事

    在移动端Web开发中,rem(root em)布局是一种常见的响应式设计方法,它允许开发者以相对于根元素(通常是html元素)的字体大小来设置元素尺寸,从而实现不同屏幕尺寸下的自适应布局。本文将深入探讨rem布局的工作...

    rem_javascript_

    1. **设置基础字体大小**:首先,我们需要在HTML文档的`&lt;head&gt;`部分或者通过JavaScript动态设置根元素的字体大小。考虑到移动优先的策略,一般会设置一个较小的初始值,如12px,然后根据屏幕宽度进行动态调整。 2. ...

    remjs移动端页面满屏H5自适应方案

    这些文件可以帮助开发者理解并实践rem布局的完整流程,包括如何设置基础字体大小、如何定义rem单位的样式以及如何处理不同屏幕尺寸的适配。 总结来说,rem移动端页面满屏H5自适应方案是一种基于CSS3 rem单位的响应...

    使用postcss-px2rem插件把px转变为rem,并配合给html根元素设置fontsize,来实现页面的自适应效果

    总之,通过`postcss-px2rem`插件和动态设置`html`的`font-size`,我们可以有效地实现页面的自适应布局,使得UI在不同设备上都能保持良好的视觉效果。在使用`vue-mobile-template`这样的模板时,开发者可以直接利用...

    px、rem转换工具 grunt-px2rem-master

    总结,`grunt-px2rem`是前端开发者在进行响应式布局时的一个实用工具,它能有效地帮助我们处理不同设备和屏幕尺寸下的CSS样式,确保页面在各种环境下都能呈现出良好的视觉效果。通过合理配置和使用,可以提高开发...

    移动端页面设计rem-

    本文将详细解析如何利用rem单位在HTML5页面中创建与设计图比例一致、在不同屏幕尺寸下仍能保持布局一致性的页面。 首先,我们需要理解rem的基本含义。rem(root em)是指相对于根元素(通常是html元素)的字体大小...

    移动端REM布局与ViewportVW布局的实例运用

    在移动端Web开发中,适配不同的屏幕尺寸是一项挑战。两种常用的解决方案是REM(Root Em)布局和Viewport Width(VW)布局。这篇文章将深入探讨这两种布局方式,并通过实例来展示它们在JavaScript和CSS中的应用。 **...

    苏宁易购2-(remb+js布局)

    在本项目中,可能结合媒体查询来定义不同屏幕尺寸下的REM基准值,确保在各种设备上都能正确显示布局。 5. **CSS预处理器**:虽然没有明确提及,但现代前端开发往往使用Sass或Less这样的CSS预处理器,它们支持变量、...

    09.code rem适配.zip

    5. **优化阅读体验**:在设置rem时,考虑到用户的可读性和舒适度,通常会保证基本的字体大小,如body元素的字体大小,不会因为屏幕尺寸变化而过于波动。 6. **计算工具**:开发者可以使用在线工具或代码片段来快速...

    SuNing(rem布局).zip

    在移动开发领域,REM(根元素字体大小)布局是一种常用的技术,它允许开发者根据设备的屏幕尺寸进行响应式设计,确保界面在不同设备上呈现良好的视觉效果。苏宁移动端的仿写项目采用REM布局,旨在模拟苏宁官网在手机和...

    rem适配两种方案-实战篇

    这样,设计师可以按照设计稿的像素值(例如设计稿以750px宽度为基准)来设定元素的`rem`值,然后在不同屏幕尺寸下保持相对比例。 二、方案二:JavaScript动态计算`html`字体大小 1. **基础原理**:通过JavaScript...

    手机端页面rem宽度自适应脚本

    2. **设置比例**:根据基准尺寸确定每`rem`代表的实际像素值,例如,假设640px为基准,则1rem = 40px。 3. **监听窗口变化**:通过JavaScript监听窗口尺寸的变化,实时更新`&lt;html&gt;`元素的字体大小。 #### 四、示例...

    移动端开发rem+flexible.js布局

    总的来说,移动端开发中的"rem+flexible.js布局"结合了rem的响应式特性与flex布局的灵活性,使得开发者能够轻松地创建适应各种屏幕尺寸的用户界面,提高了开发效率。通过学习和实践这一技术,新手可以快速掌握移动端...

    vantUI css文件H5自适应REM处理项目

    REM(Relative Em Unit)是一种相对单位,以根元素(通常是 html 元素)的字体大小为基准,使得页面元素的尺寸在不同屏幕尺寸下能够自动调整,从而达到良好的响应式效果。 1. **CSS 与 H5 自适应** 在移动设备上,...

Global site tag (gtag.js) - Google Analytics