rem计算适配
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计算适配的更多相关文章
- H5 页面 rem 布局适配方法
rem 布局适配方案 主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小: css 中,设计稿元素的宽.高.相对位置等取值,按照同等比例换算为 re ...
- 一个因为系统字号设置导致的rem计算渲染异常问题
测试同学突然拿着一部手机过来说,H5渲染各个元素都变大了,有些元素撑出了屏幕外面. 本来以为是某个Webview的渲染兼容问题,结果发现所有的浏览器都这样. 莫名其妙,隐约感觉是 rem计算出了问题, ...
- Flexible实现H5页面的rem布局适配
1.https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html (使用Flexible实现手淘H5页面的终端适配) 2.http ...
- 手机端rem如何适配_rem详解及使用方法2
作为一个前端开发人员,我们的任务是将UI设计师的图稿运用计算机语言呈现在用户面前.而现在的设备大小尺寸不一,近年来智能手机的普及更是让网页的用户大部分来源与手机,所以让不同大小的移动端屏幕都能较好的还 ...
- 移动端rem计算
教你如何用 lib-flexible 实现移动端H5页面适配 2017年07月22日 16:01:24 Pwcong 阅读数:18872 版权声明:本文为博主原创文章,未经博主允许不得转载. h ...
- 移动端rem单位适配使用
1.适配方法 //缩放比例!function(e,t){function i(){o=1,e.devicePixelRatioValue=o,s=1/o;var t=a.createElement(& ...
- css rem计算
先抛出一个问题:为什么要选择rem? px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力, ...
- 使用 rem 实现 适配各种屏幕布局
年数已久!!!技术更新太快,谨慎观看,不过作为了解一下思路还是可以的 在此呢,我只大略的谈一下在研究了px,em,rem,和手淘的做法之后,我所采用的做法及硬性规则: 我就不再过多的将上面三种单位的区 ...
- 手机端rem如何适配_rem详解及使用方法
什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...
随机推荐
- WPF入门教程系列二十一——DataGrid示例(一)
前面我们学习了ListView控件的使用示例,今天我们来学习DataGrid的有关知识.提到DataGrid 不管是Asp.Net中的网页开发还是WinForm应用程序开发都会频繁使用.通过它我们可以 ...
- Ajax_03之接收数据
1.使用XHR接收服务器返回的数据--text 服务器端: header('Content-Type:text/plain'); echo 'xxx'; 客户端: xhr.responseTex ...
- ASP.NET Core - ASP.NET Core MVC 的功能划分
概述 大型 Web 应用比小型 Web 应用需要更好的组织.在大型应用中,ASP.NET MVC(和 Core MVC)所用的默认组织结构开始成为你的负累.你可以使用两种简单的技术来更新组织方法并及时 ...
- [汇编与C语言关系]5. volatile限定符
现在研究一下编译器优化会对生成的指令产生什么影响,在此基础上介绍C语言的volatile限定符.首先看下面的C程序: /* artificial device registers */ unsigne ...
- 深入理解DOM事件机制系列第二篇——事件处理程序
× 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML ...
- MySQL线程池
MySQL线程池只在Percona,MariaDB,Oracle MySQL企业版中提供.Oracle MySQL社区版并不提供. 在传统方式下,MySQL线程调度方式有两种:每个连接一个线程(one ...
- Google Chrome 应用商店上传扩展程序
1. 进入 Google 开发者中心 网址: https://chrome.google.com/webstore/developer/dashboard?hl=zh-cn 2. 添加新项 上传后,出 ...
- 制作动画或小游戏——CreateJS基础类(一)
前面曾经记录过Canvas的基础知识<让自己也能使用Canvas>,在实际使用中,用封装好的库效率会高点. 使用成熟的库还能对基础知识有更深入的理解,CreateJS是基于HTML5开发的 ...
- objective-c 语法快速过(6)内存管理原理
内存管理基本原理(最重要) 移动设备的内存极其有限(iphone 4内存512M),每个app所能占用的内存是有限制的(几十兆而已). 当app所占用的内存较多时,系统会发出内存警告,这时得回收一些不 ...
- Cesium原理篇:6 Render模块(4: FBO)
Cesium不仅仅提供了FBO,也就是Framebuffer类,而且整个渲染过程都是在FBO中进行的.FBO,中文就是帧缓冲区,通常都属于高级用法,但其实,如果你了解了它的基本原理后,用起来还是很简单 ...