写移动端项目时,总是会纠结是用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. mac上配置java jdk环境

    访问Oracle官网 http://www.oracle.com,浏览到首页的底部菜单 ,然后按下图提示操作: 2.点击“JDK DOWNLOAD”按钮: 3.选择“Accept Lisence Ag ...

  2. 交换机基础配置之stp生成树实验

    实验的要求是以上面的拓扑图为例,查看当前根桥的所在并把三成交换机switch1指定为根桥 我们可以用show spanning-tree来查看stp的信息 输入后会显示两部分 上面一部分为当前交换机自 ...

  3. css样式 body的font-size 为什么用625%

    浏览器的默认高度?一般为16px. 为什么用62.5%作为body的默认样式?16px62.5%=10px.* 那么为什么一般多是 16px  *625% = 100px; <响应式Web设计实 ...

  4. Nginx 配置继承模型

    要了解nginx的继承模型,首先需要知道nginx使用多个配置块进行操作.在nginx中,这样的块被称为上下文,例如,放置在服务器上下文中的配置指令驻留在server { }块中,就像放置在http上 ...

  5. laravels -- Swoole加速php

    LaravelS是一个胶水项目,用于快速集成Swoole到Laravel,然后赋予它们更好的性能.更多可能性. 环境 : ubuntu16 + nginx + php7.1 + LaravelS搭建高 ...

  6. [Noip2016]愤怒的小鸟(状压DP)

    题目描述 题意大概就是坐标系上第一象限上有N只猪,每次可以构造一条经过原点且开口向下的抛物线,抛物线可能会经过某一或某些猪,求使所有猪被至少经过一次的抛物线最少数量. 原题中还有一个特殊指令M,对于正 ...

  7. Description POJ1703

    Description The police office in Tadu City decides to say ends to the chaos, as launch actions to ro ...

  8. 笔记-python-standard library-11.2 os.path

    笔记-python-standard library-11.2 os.path 1.      os.path Source code: Lib/posixpath.py (for POSIX), L ...

  9. python基础之数据类型与变量patr1

    1:编写for循环,利用索引遍历出每一个字符 msg='hello egon 666' 2:编写while循环,利用索引遍历出每一个字符 msg='hello egon 666' 3:msg='hel ...

  10. 清空Fragment回退栈中某个Fragment之上的所有Fragment

    根据debug信息查看Fragment回退栈的情况,具体debug代码如下: int num = getActivity().getSupportFragmentManager().getBackSt ...