写移动端项目时，总是会纠结是用css3 media query 还是用rem。移动端框架挺多，但是因为项目都比较小，不考虑使用。

无意在网上找到一个移动端rem布局的解决方案，经个人实践，目前未出现什么大问题，收藏备用。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>移动端rem布局</title>

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

    <style>

        .test{

            width: 1rem;

            height: 1rem;

            background-color: #fa5275;

        }

    </style>

</head>

<body>

    <div class="test"></div>

    <p>设置前html的fontsize:16px;</p>

    <p>设置前html的fontsize:16px;</p>

    <script>

        function adapt(designWidth, rem2px){

            var d = window.document.createElement('div');

            d.style.width = '1rem';

            d.style.display = "none";

            var head = window.document.getElementsByTagName('head')[0];

            head.appendChild(d);

            var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));

            d.remove();

            document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';

            var st = document.createElement('style');

            var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";

            var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"

            st.innerHTML = portrait + landscape;

            head.appendChild(st);

            return defaultFontSize;

        }

        var defaultFontSize = adapt(640, 100);

    </script>

</body>

</html>

个人收藏的移动端网页布局rem解决方案的更多相关文章

  1. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

  2. 移动端自适应布局 rem方案

    1.viewport.js (function(window, document) { // 给hotcss开辟个命名空间,别问我为什么,我要给你准备你会用到的方法,免得用到的时候还要自己写. con ...

  3. Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...

  4. 虚拟键盘冲击移动端fixed布局的解决方案

    在做移动端业务开发时,会碰到fixed元素和输入框同时存在的情况.在手机软键盘唤起的情况下,会造成原本fixed定位的元素跟随软键盘而上浮,对整体布局造成冲击.来看这样一个栗子直观的感受一下这个bug ...

  5. [转] Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...

  6. 八、Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...

  7. 移动端网页 rem css书写

    移动端网页书写   css样式: @charset "utf-8";body,html{font-family: "微软雅黑";font-size:100px; ...

  8. Web开发系列【1】实用的网页布局（PC端）

    在熟悉那些常用的软件.工具后,我们正式开始开发,在前期准备工作之后,我们要做的事情是写页面,也就是网页布局.在w3c.菜鸟.慕课网等等网站上都有基础的 HTML+CSS 知识讲解,在初期学习中,跟着教 ...

  9. HTML5新结构标签和移动端页面布局

    --------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...

随机推荐

  1. 通过tomcat配置访问本机资源

    背景:在最近的项目中使用海康威视的摄像机,在项目预算中没有购买对应的硬盘录像机,但是由于客户需要能够进行视频的回放功能,所以直接采用了海康提供的视频管理客户端直接进行视频录像,然后保存在本机进行播放. ...

  2. 【ACM之行】◇第一站◇ 2018HDU多校赛总结

    ◇第一站◇ 2018HDU多校赛 十场多校赛下来,也算是给一个初中生开了眼界……看着清华一次次AK(默默立下flag),看着自己被同校的高中生完虐,一个蒟蒻只能给dalao们垫脚

  3. Django 入门案例开发

    Django是一个重量级的web开发框架,它提供了很多内部已开发好的插件供我们使用:这里不去描述 Django直接进入开发过程. Django入门案例分两部分:一.开发环境的配置:二.业务需求分析. ...

  4. 常见Linux的发行版有哪些？并描述不同发行版之间的联系与区别。

    一.按系列罗列linux的发行版,并描述不同发行版之间的联系和区别 Linux发行版=Linux内核+商业软件 linux的发行版: RedHat.Fedora.suse.红旗.debian.Ubun ...

  5. 基于centos7实现的nfs

    NFS NFS(Network FileSystem,网络文件系统),最早由Sun公司所发展出来的,主要是通过网络让不同的主机.不同的操作系统,可以彼此分享个别档案,因此我们也可以简单把NFS看成是一 ...

  6. linux面试集

    shell:1.$# 和 $*之类的特殊变量 特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数.n是一个数字,表示第几个参数.例如,第一个参数就是$1 $# 传递给脚本或 ...

  7. nodejs的http-server--web前端福利

    很多web前端在日常开发的时候可能会想常开发是谁. 不好意思,说错了. 很多web前端在日常开发的时候总是避免不了让所写页面在服务器环境下执行. 比如当你在用angularjs的route模块等等等. ...

  8. python__高级 : 类当作装饰器

    类在创建对象时,会调用 __init__ 初始化一些东西 , 然后 如果类中定义了 __call__ 方法,可以直接用  对象()  这种方法调用,所以可以用类来装饰函数: class Test(ob ...

  9. redis源代码结构解析

    看了黄建宏老师的<Redis设计与实现>,对redis的部分实现有了一个简明的认识: 之前面试的时候被问到了这部分的内容,没有关注,好在还有时间,就把Redis的源码看了一遍. Redis ...

  10. python正则表达式01--贪心算法和非贪心算法findall()

    import re st = 'asdfasxxixxdafqewxxlovexxsadawexxyouxxas' # . #点匹配除换行符外的任意字符 a0 = re.findall('xx.',s ...