<!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. 我的c++学习(9)指针

    ◆ 1.指针变量的赋值.初始化与简单应用 ,y; y=; // y可以理解成该存储单元的当前名字 int *ip; // ip是一个指针(变量) ip=&y; // ip是存储空间y的地址 c ...

  2. 2016 Multi-University Training Contest 1 C.Game

    Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submis ...

  3. Block 使用注意点

    Block 使用的注意点 block 一般用来传值的时候才调用 代理:一般用来封装控件的时候调用,这样有利于扩展 1.用Block 可以做通知的,什么时候需要的时候就什么时候调用.分为无返回值和有返回 ...

  4. SPX Instant Screen Capture

    Today I will recommend a NICE screen capture tool, which name is SPA Instant Screen Capture. http:// ...

  5. 最小生成树のprim算法

    Problem A Time Limit : 1000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Sub ...

  6. About_Return

    返回值:return return 表示从被调函数返回到主调函数继续执行,返回时可附带一个返回值,由return后面的参数指定. return通常是必要的,因为函数调用的时候计算结果通常是通过返回值带 ...

  7. <二>JDBC_通过ResultSet执行查询操作

    一.ResultSet: 结果集. 封装了使用 JDBC 进行查询的结果.  1. 调用 Statement 对象的 executeQuery(sql) 可以得到结果集. 2. ResultSet 返 ...

  8. Hive_数据倾斜处理

    Hive中三种join map join (小表join大表,将小表加入到内存) 设置map join: hive.auto.convert.join=true hive.mapjoin.smallt ...

  9. HDU 1281 二分图

    棋盘游戏 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  10. bzoj1720: [Usaco2006 Jan]Corral the Cows 奶牛围栏

    金组题什么的都要绕个弯才能AC..不想银组套模板= = 题目大意:给n个点,求最小边长使得此正方形内的点数不少于c个 首先一看题就知道要二分边长len 本来打算用二维前缀和来判断,显然时间会爆,而且坐 ...