<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

<script>

(function (doc, win) {

        var docEl = doc.documentElement,

            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

            recalc = function () {

                var clientWidth = docEl.clientWidth;

                if (!clientWidth) return;

                if(clientWidth>=640){

                    docEl.style.fontSize = '100px';

                }else{

                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';

                }

            };

        if (!doc.addEventListener) return;

        win.addEventListener(resizeEvt, recalc, false);

        doc.addEventListener('DOMContentLoaded', recalc, false);

    })(document, window);

</script>

 /*你引进的资源*/

<title>标题</title>

</head>

<body>

 /*你的代码*/

</body>

</html>

移动端rem实现响应布局的更多相关文章

  1. 第130天：移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  2. 移动端REM布局模板(阿里高清方案)

    移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...

  3. 移动端Rem布局注意事项

    1.布局的总体结构框架:      2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...

  4. 移动端rem适应布局

    移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...

  5. CSS3——PC以及移动端页面适配方法（响应布局）

    响应布局就是不同宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而使页面适应不同宽度. <!DOCTYPE html> <html lang="en" ...

  6. 前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  7. 解决移动端rem加载瞬间页面错乱的方法（放大或者缩小）

    移动端布局有很多种,这里我们最常使用到rem+百分比的布局方式(高度/字体设置rem单位,宽度设置百分比)来处理屏幕兼容,这种方法在兼容上是比较不错的,可以使得字体以及整体适应各种大小的屏幕,可以解决 ...

  8. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  9. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

随机推荐

  1. BDYY【面试题】

    1.引用与多态的关系:引用是除指针外另一个可以产生多态效果的手段.这意味着,一个基类的引用可以指向它的派生类实例. 2.C++可以多继承 3.引用与指针区别:

  2. Compare Version Numbers

    Compare two version numbers version1 and version1. If version1 > version2 return 1, if version1 & ...

  3. 近半年MVC使用后的一些习惯

    半年前接新项目, 来了一个前端, 由于只有我前后台都会, 就做业务层+辅助前端显示, 于是我决定使用MVC 上面那句无关紧要的话让我改了好多遍, 转载请注明出处: http://www.cnblogs ...

  4. xcode8插件无法使用

    一,xcode8无法使用插件的问题 创建新的XcodeSigner代码证书,并执行"sudo codesign -f -s XcodeSigner /Applications/Xcode.a ...

  5. C#读写配置文件

    .net有两种程序,一个是web程序,另外一种是app客户端程序,这两种程序的配置文件读写模式不同,web程序是直接读写马上生效.app客户端程序比如刷新加载一次. System.Configurat ...

  6. 为动态添加的元素，绑定click事件

    全选和取消全选 $("#quanxuan").click(function(){ $("input[name='picCheck']").prop(" ...

  7. UVA 10791 Minimum Sum LCM（分解质因数）

    最大公倍数的最小和 题意: 给一个数字n,范围在[1,2^23-1],这个n是一系列数字的最小公倍数,这一系列数字的个数至少为2 那么找出一个序列,使他们的和最小. 分析: 一系列数字a1,a2,a3 ...

  8. 新手程序员随笔2——初识html、css和javascript

    翻看博客,发现好久木有发blog了.纠其原因,一则是近来工作上卡到了一个编程难题,我是一个单线程的小猿,当我手头有事情做的时候,我不想分心去做其它事情,如写blog.二则是我个人的写作能力不佳,想到写 ...

  9. *HDU1598 并查集

    find the most comfortable road Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  10. Android Studio插件美化Android Studio,文艺清新范

    一:重新定义你工作区的颜色 1:原生的工作区文字的颜色反人类,来这个网站下载自己喜欢的主题:http://www.riaway.com/  轻松定义:下载后是个jar包. 2:导入jar包 file ...