git地址:https://github.com/wjf444128852/about-web-rem

建议在CSS引入之前引入下面这段JS代码,比例1rem:100px。

用了这个JS就不用在CSS内写N多个@media screenXXX了。

说明:

  • 在html内最外层元素给max-width:640px,min-width:320px
  • 元素宽高都以rem为单位就会自动缩放
  • 字体大小一般0.2rem-0.34rem,如>h3:font-size:0.3rem,h4:font-size:.28rem,p:font-size:.2rem一般这几个够用了.
  • 引入img标签时候该img必须float或者给一个属性(vertical-align: middle;display:block)否则其与父元素有20多px的margin-bottom
  • 如img想自适应需要给个宽度,宽度可以百分比,可以rem为单位给固定宽度,比如img实际宽度100px,用此JS后想自动缩放,可以css里给该img{width:1rem},其他元素雷同。
  • 如果有用到input时候,该input得浮动或者以rem为单位给固定宽度和高度,不然占据行高很大,出现元素占据位置大时候,float一下即可
  • 参考来源:戳此处
    (function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    //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);
    /*DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。
    DOMContentLoaded事件本身不会等待CSS文件、图片、iframe加载完成。
    它的触发时机是:加载完页面,解析完所有标签(不包括执行CSS和JS),
    并如规范中所说的设置interactive和执行每个静态的script标签中的JS,然后触发。
    而JS的执行,需要等待位于它前面的CSS加载(如果是外联的话)、执行完成,
    因为JS可能会依赖位于它前面的CSS计算出来的样式。*/
    })(document, window);

    如有不足之处多多指出。。

rem计算适配的更多相关文章

  1. H5 页面 rem 布局适配方法

    rem 布局适配方案 主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小: css 中,设计稿元素的宽.高.相对位置等取值,按照同等比例换算为 re ...

  2. 一个因为系统字号设置导致的rem计算渲染异常问题

    测试同学突然拿着一部手机过来说,H5渲染各个元素都变大了,有些元素撑出了屏幕外面. 本来以为是某个Webview的渲染兼容问题,结果发现所有的浏览器都这样. 莫名其妙,隐约感觉是 rem计算出了问题, ...

  3. Flexible实现H5页面的rem布局适配

    1.https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html (使用Flexible实现手淘H5页面的终端适配) 2.http ...

  4. 手机端rem如何适配_rem详解及使用方法2

    作为一个前端开发人员,我们的任务是将UI设计师的图稿运用计算机语言呈现在用户面前.而现在的设备大小尺寸不一,近年来智能手机的普及更是让网页的用户大部分来源与手机,所以让不同大小的移动端屏幕都能较好的还 ...

  5. 移动端rem计算

    教你如何用 lib-flexible 实现移动端H5页面适配 2017年07月22日 16:01:24 Pwcong 阅读数:18872    版权声明:本文为博主原创文章,未经博主允许不得转载. h ...

  6. 移动端rem单位适配使用

    1.适配方法 //缩放比例!function(e,t){function i(){o=1,e.devicePixelRatioValue=o,s=1/o;var t=a.createElement(& ...

  7. css rem计算

    先抛出一个问题:为什么要选择rem? px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力, ...

  8. 使用 rem 实现 适配各种屏幕布局

    年数已久!!!技术更新太快,谨慎观看,不过作为了解一下思路还是可以的 在此呢,我只大略的谈一下在研究了px,em,rem,和手淘的做法之后,我所采用的做法及硬性规则: 我就不再过多的将上面三种单位的区 ...

  9. 手机端rem如何适配_rem详解及使用方法

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...

随机推荐

  1. angularjs UI Libraries

    angularjs UI Libraries ● ng-bootstrap is currently available. ● PrimeNG has largest number of compon ...

  2. 在计算机 . 上没有找到服务 WAS

    添加的程序不全导致或者服务没开启导致 重新打开IIS,刷新一下 发现已经可以了,不再标红报错了

  3. 【转】Linq Group by

    http://www.cnblogs.com/death029/archive/2011/07/23/2114877.html 1.简单形式: var q = from p in db.Product ...

  4. 实现python中的map函数

    假设Python没有提供map()函数,自行编写my_map()函数实现与map()相同的功能.以下代码在Python 2.7.8中实现. 实现代码: def my_map(fun,num): i = ...

  5. 深入理解DOM事件机制系列第三篇——事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事 ...

  6. 深入理解滚动scroll

    前面的话 前面两篇博文分别介绍过偏移大小.客户区大小.本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight scrollHeight表示元素的总高度,包括由于溢出 ...

  7. EntityFramework之数据库以及表基本创建(一)

    前言 之前有学过EF一段时间那时EF才4.0似乎还不太稳定,而现在EF都已7.0版本,同时AspNet Identity都与此大有关联,看来是大势所趋于是开始学习EF,在学EF过程中也遇到一些小问题, ...

  8. 解决在配置Oracle数据库连接错误问题

    项目开发使用的Oracle,但是使用了不同的版本的Oracle数据库.然后自己在电脑上安装了2个连接客户端,版本分别是: 10.2.0 12.1.0 用Toad for Oracle 9.0的时候,我 ...

  9. 如何远程备份MySQL binlog

    以前备份binlog时,都是先在本地进行备份压缩,然后发送到远程服务器中.但是这其中还是有一定风险的,因为日志的备份都是周期性的,如果在某个周期中,服务器宕机了,硬盘损坏了,就可能导致这段时间的bin ...

  10. JavaScript的全局变量与局部变量解析

    一.JavaScript scope 的划分标准是function函数块,不是以 if.while.for来划分的 <script> function f1(){ alert(" ...