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. 通过对表格数据的选择对input的value进行修改

    通过对表格数据的选择对input的value进行修改 $(function(){ $("#tb_gys").datagrid({ url:'getGysinfoList.actio ...

  2. 自定义配置UEditor 工具栏上的按钮列表

    修改配置项的方法: 1. 方法一:修改 ueditor.config.js 里面的 toolbars 2. 方法二:实例化编辑器的时候传入 toolbars 参数 方法一:在ueditor.confi ...

  3. 深入学习jQuery选择器系列第七篇——表单选择器

    × 目录 [1]表单元素 [2]对象属性 前面的话 无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素 表单 ...

  4. AngularJS之Dependency Injection(五)

    前言 这一节我们来讲讲AngularJS中的依赖注入,在实际开发中Angular提供了具体的方法供我们去调用,但是一旦业务不能满足要求或者出现麻烦或者错误时导致无从下手,所以基于此我们有必要深入一点去 ...

  5. Oracle Database 11g Express Editon介绍及安装

    一.Oracle Database 11g Express版本介绍 公司项目开发中,使用的数据库是Oracle 10g和MySQL 5.5,最新因为开发需要,需要从后台读取一些数据.使用的客户端是PL ...

  6. 借助node实战WebSocket

    一.WebSocket概述 WebSocket协议,是建立在TCP协议上的,而非HTTP协议. 如下: ws://127.0.0.1或wss://127.0.0.1就是WebSocket请求. 注:w ...

  7. 深入seajs源码系列一

    简述 前端开发模块化已经是大势所趋,目前模块化的规范有很多,众所周知的有commonJS,Module/Wrappings和AMD等,而且ES6也着手开始制定模块化机制的实现.类似于c/c++的inc ...

  8. 让你的JS更优雅的小技巧

    首先,看一个非常不优雅的例子: 看到这段代码,虽然代码很短,但是一眼看上去就不想再看了,也就是没什么可读性.这段代码,没有封装,随意定义一个变量都是全局变量,这样在多人开发或者是大型开发中,极其容易造 ...

  9. Struts2学习笔记--使用Response下载文件和Struts2的StreamResult文件下载

    使用Response下载文件,servlet中的文件下载是通过流来实现的   我在webRoot文件夹下新建了一个文件夹from,里边放了一张图片,这里就以下载这张图片为例:download.jsp很 ...

  10. Android 学习Activity(1)activity和intent

    工具是:JDK环境配置+SDK+ADT工具 一.Activity  主要作用: 1.用户与应用程序的接口 2.控件的容器 二.创建Activity要点:(在src中的目录下包里) 1.一个Activi ...