<!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. CodeForces 544A

    You are given a string q. A sequence of k strings s1, s2, ..., sk is called beautiful, if the concat ...

  2. 使用 yum 安装 virtualbox 虚拟机

    我的环境是centos7,所以也可以说是在centos7下使用yum安装virtualbox,不过对于其他的LINUX发行版方法都一样. 下面的操作都是在命令行中进行的. 1.首先需要配置yum的源. ...

  3. 深入浅出JMS(三)--ActiveMQ简单的HelloWorld实例

    第一篇博文深入浅出JMS(一)–JMS基本概念,我们介绍了JMS的两种消息模型:点对点和发布订阅模型,以及消息被消费的两个方式:同步和异步,JMS编程模型的对象,最后说了JMS的优点. 第二篇博文深入 ...

  4. DOM相关属性，方法，兼容性问题处理小析

    DOM:Document Object Model文档对象模型,用于让程序(js)取操作页面中的元素.DOM节点类型有12种. (一)属性 一.子节点操作1.所有子节点(1)元素.childNodes ...

  5. 改变spring-servlet.xml名字和默认位置

    如何我们在web.xml定义: <servlet> <servlet-name>spring</servlet-name> <servlet-class> ...

  6. 关于页面中table中相同的列自动合并

    代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  7. DS实验题 融合软泥怪-2 Heap实现

    题目和STL实现:DS实验题 融合软泥怪-1 用堆实现优先队列 引言和堆的介绍摘自:Priority Queue(Heaps)--优先队列(堆) 引言: 优先队列是一个至少能够提供插入(Insert) ...

  8. [工具分享]JetBrains ReSharper 9.0 正式版和注册码

    话不多说.直接上百度云盘分享链接.有需要的盆友去下载吧. 百度云盘:http://pan.baidu.com/s/1kTKIQhh 注册码这里提供一个.有需要的自己拿走.或者可以使用压缩包里面的key ...

  9. 掌握Thinkphp3.2.0----模型初步

    1.为什么要学习框架?框架是什么? 简单的说就是为了简单,提高开发的效率.至于什么是框架(一种规范),现在的我还不是很理解,容后再议. 学习框架最重要的就是遵循,按照开发者的意图来使用该框架. 2.t ...

  10. MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作（转载）

    本文转载自:http://www.cnblogs.com/jpf-java/p/6013540.html 上一篇博文MyBatis学习总结(一)--MyBatis快速入门中我们讲了如何使用Mybati ...