写移动端项目时，总是会纠结是用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. 洛谷P4316 绿豆蛙的归宿(期望)

    题意翻译 「Poetize3」 题目背景 随着新版百度空间的上线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿. 题目描述 给出一个有向无环图,起点为1终点为N,每条边都有一个长度,并且从起点出 ...

  2. 【赛时总结】 ◇赛时·II◇ AtCoder ABC-100

    ◆赛时·II◆ ABC-100 ■唠叨■ ABC终于超过百场比赛啦(毫不犹豫地参加).然后莫名其妙的好像是人很多,评测慢得不可理喻.然后我就--交了一大发--错误程序--然后B题就没了.最后的D题居然 ...

  3. tar工具(打包，压缩）

    tar工具(打包,压缩)========================= tar打包工具 -c:表示建立一个tar包或者压缩文件包-x:表示解包或者解压缩-v:表示可视化-f: 后面跟文件名(即-f ...

  4. python join() 提示UnicodeDecodeError: 'utf8' codec can't decode byte 0xcb in position 0: unexpected end of的原因及解决办法

    问题: 在使用join()将列表元素连接成字符串时出错如下 return split.join(result) UnicodeDecodeError: 'utf8' codec can't decod ...

  5. Shell学习——终端打印

    1.echo1.1.默认情况下,echo在每次调用后会添加一个换行符1.2.待打印的内容,可以用单引号.双引号或者直接打印,不同的方式,有各自的限制1.2.1.使用不带引号的echo时,没法打印分好( ...

  6. PHP提取奇数或偶数下标元素

    该功能主要用到 array_filter() 函数,这个函数可以用回调函数过滤数组中的单元.用法: array array_filter ( array $array [, callable $cal ...

  7. linux-shell——04

    mv 移动文件或者目录 格式:mv [选项]      源文件/目录     目标文件/目录 注:若移动目标位置与源位置相同(当前下操作),则此操作相当于重命名(改名) ex: [root@local ...

  8. Oozie 安装及 examples app 的使用

    参考文档 一.Building OOzie 特别注意的是修改Pom.xml文件中的版本与本机中安装的版本相同 二. install Oozie 1.为 hadoop 添加 Oozie 的代理用户,添加 ...

  9. tomcat7 配置 https安全访问

    在apache-tomcat-7.0.33-windows-x64.zip配置https,结果在配置SSL时遇到一些问题 1.用JDK自带的keytool来生成私有密钥和自签发的证书,如下: keyt ...

  10. 12 Django组件-forms组件

    forms组件 校验字段功能 针对一个实例:注册用户讲解. 模型:models.py class UserInfo(models.Model): name=models.CharField(max_l ...