<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<script>

    function getRem (){

           var currentWidth = document.documentElement.clientWidth;

            var fontSize  = 100;

            var width = 320;

            var currentFontsize = currentWidth / width * fontSize;

            document.querySelector('html').style.fontSize = currentFontsize + 'px';

    }

    getRem();

    window.onresize = function(){

        getRem();

    }

</script>

<style>

    p {

        font-size: 1rem;

    }

</style>

<body>

    <p>测试</p>

</body>

</html>

手机端适配rem代码片段的更多相关文章

  1. 关于手机端适配的问题（rem，页面缩放）

    关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...

  2. 手机端使用rem适配

    最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...

  3. 手机端页面rem自适应脚本

    什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...

  4. 手机端布局rem 与vm的使用

    手机端原来的时候,在项目中使用js判断出html的字体,然后根据rem设置字体,但是js本着少用的原则,考虑用vm,vh等(顺带说一句,vm vh是网页可视区域宽度 高度 即浏览器宽度减去约16px) ...

  5. 自动PC端显示 手机端隐藏CSS代码判断实现

    实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...

  6. h5 手机端适配问题汇总

    1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器  能识别 a标签中href的  javascript:; 为网址  ,  55555 3.safari 的弹框如 ...

  7. 适配手机端之 rem

    (function() { var psdWidth = 1080, maxRem = 100, ch = document.documentElement.clientHeight || docum ...

  8. rem手机端适配

    <script> document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+ ...

  9. 手机端使用rem的适配

    <html> <body> <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d312 ...

随机推荐

  1. maven依赖json-lib失败

    © 版权声明:本文为博主原创文章,转载请注明出处 项目中需要使用到JSONArray,因此到将json-lib的依赖加入pom.xml中,但是一直下载失败 <dependency> < ...

  2. Python基础之迭代器

    迭代器的优点: 1.可以使用for循环遍历: 2.可以节省内存空间: 3.可以有序的访问集合(set)数据结构内的元素. 迭代器的缺点: 只能向前,不能后退. 可迭代对象与不可迭代对象: 可迭代对象: ...

  3. ArrayList remove注意事项

    例子1: List<Integer>list=new ArrayList<>(); list.add(1); list.add(2); list.add(2); list.ad ...

  4. cat 命令

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 1．命令格式: cat [选项] [文件] ...

  5. 安卓TabHost+ViewPager+RadioGroup多功能模板整理

    如今安卓比較流行的布局就是类似新闻client和手机QQ那种的底端可选择,上面的个别页面能够滑动选择. 在測试过程中发现用安卓自带的TabHost去构建.非常难得到自己定义的效果. 因此採用TabHo ...

  6. Java深入 - Java 内存分配和回收机制-转

    Java的GC机制是自动进行的,和c语言有些区别需要程序员自己保证内存的使用和回收. Java的内存分配和回收也主要在Java的堆上进行的,Java的堆中存储了大量的对象实例,所以Java的堆也叫GC ...

  7. PHP性能之语言性能优化：vld——查看代码opcode的神器

    vld介绍 vld是PECL(PHP 扩展和应用仓库)的一个PHP扩展,现在最新版本是 0.14.0(2016-12-18),它的作用是:显示转储PHP脚本(opcode)的内部表示(来自PECL的v ...

  8. Android开发 adb命令提示：Permission denied （转）

    如题:模拟器版本->android 7.1.1 遇到这样的情况把模拟器root一下就好了:su root =============2017年4月3日20:57:33============== ...

  9. PHP -- 问题

    @.源码安装,最开始,自己通过 ./config  make  make install三步,啥参数也没加,安装好之后,发现/usr/local/php下就一个man文件夹,死都没找到php-fpm之 ...

  10. Java图形界面实战案例——实现打字母游戏

    实现打字母的游戏 这次这个案例能够说是头几次所讲的内容的一个技术汇总,主要是 运用了几大块的知识.我们先来定义一下案例的背景:在一个300*400的窗口上.有10个随机产生的字母下落,在键盘上敲击字母 ...