css3 rem手机自适应框架

rem是按照html的字体大小来 所以 不同宽度浏览器 htmlfont-size不一样 就可以做到自适应了 此方法比百分比方便
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width:10rem; height:10.2rem; background: #000;"></div>
<div style="width:10.6rem; height:10.3rem; background: #F00;"></div>
</body>

<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
/* var clientWidth = docEl.clientWidth;*/
var clientWidth = parseInt($('body').width());
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</html>
</pre>

ps:这个rem使用需要注意 这个js函数不是立马执行的 所以刚开始加载的时候最好加个进度条 或者用百分比 不然就会出现 js没执行完的rem效果 然后又出现js执行完加了rem的效果

css3 rem手机自适应框架的更多相关文章

  1. rem实现自适应

    总结一下,rem实现自适应:用rem代替px,配合媒体查询设置font-size:n%. 首先,px是死的.若一律用px,那就会大的显得小,小的屏幕显得大.其次,rem是活的,通过设置字体大小可以引起 ...

  2. rem绝对自适应方案

    rem css3新增的rem是现在非常受欢迎的单位.看一下MDN上的说明: 这个单位代表根元素的 font-size 大小(例如 <html> 元素的font-size). 使用这个单位可 ...

  3. 通过rem编写自适应移动端要点

    直接上干货 1,dpr 苹果手机像素是2 普通安卓机是1 也就是说1像素下苹果需要的像素点是安卓机的两倍 所以一个需要15x15显示的图像安卓机仅需要提供15X15即可显示清楚 苹果手机需要要30X3 ...

  4. Rem实现自适应初体验

    第一次做移动端的页面,遇到的第一个问题就是移动端的轮播图.其实轮播图的插件有很多,但是完全满足需求的并不容易找. 需求: 1.实现基本的触屏轮播图效果 2.传入非标准比例的图片,可以自动平铺(有时候图 ...

  5. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

  6. ASP.NET网站要手机自适应页面

    本文转载的地址:http://mobile.51cto.com/ahot-409516.htm 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首 ...

  7. 移动端web app要使用rem实现自适应布局:font-size的响应式

    关于webAPP的开发最主要解决的就是“自适应自适应布局”.常规的适配有很多做法,例如:流式布局.限死宽度等,但是这些方案都不是最佳的解决方法​,而最满足设计需要的是: 元素可以根据屏幕大小而等比列变 ...

  8. css3 rem的用法

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

  9. CSS3判断手机横屏竖屏

    原理: 当用户旋转屏幕的时候,会进入到你的监听方法中,然后通过window.orientation来获取当前屏幕的状态:0 - 竖屏90 - 逆时针旋转横屏-90 - 顺时针旋转横屏180 - 竖屏, ...

随机推荐

  1. F5的作用

    F5 F5的全称是F5-BIG-IP-GTM,是最流行的硬件负载均衡设备,其并发能力达到百万级.F5的主要特性包括: 多链路的负载均衡和冗余 可以接入多条ISP链路,在链路之间实现负载均衡和高可用. ...

  2. 记一次Python与C#的AES加密对接

    前言 这几天做自动化测试的同事找到我,说是帮她看看有个AES加密的问题要怎么处理. 大概就是文档中贴了一段C#的AES加密代码,然后她要翻译成python的版本,去做一些测试相关的工作. 在我印象中, ...

  3. 新增SAP到OA接口，OA怎么更新WSDL给PI，怎么选择PI的IP地址（备忘）

    1.首先定义个class. 弄完以后可以使用http://IP地址:8088/seeyon/services/sapService?wsdl  进行导出,部署在哪个服务器就用哪个服务器的IP地址 pr ...

  4. 练手WPF（一）——模拟时钟与数字时钟的制作（中）

    今天接着制作数字时钟 数字时钟主要用到Path控件,主要用于定义数字笔划的形状. (1)添加一个DigitLine类 数字时钟的数字8由7笔组成,看如下定义的字段字符串数组PathDatas,每个st ...

  5. python基础教程：dir()和__dict__属性的区别

    只要是有属性的数据对象(不一定是面向对象的对象实例,而是指具有数据类型的数据对象),都可以通过- ---- __dict__和dir()来显示数据对象的相关属性. __ dict__可以看作是数据对象 ...

  6. js键盘事件以及键盘事件拦截

    一.键盘事件 onkeydown: 按下键盘时触发 onkeypress: 按下有值的键时触发 注意: onkeypress按下 Ctrl.Alt.Shift.Meta 这样无值的键,这个事件不会触发 ...

  7. Linux软件安装——服务管理的命令

    Linux软件安装——服务管理的命令 摘要:本文主要学习了Linux系统中服务管理的命令. service命令 service命令用于对系统服务进行管理,比如启动(start).停止(stop).重启 ...

  8. Java生鲜电商平台-微服务入门与服务的拆分架构实战

    Java生鲜电商平台-微服务入门与服务的拆分架构实战 刚开始进入软件行业时还是单体应用的时代,前后端分离的概念都还没普及,开发的时候需要花大量的时间在“强大”的JSP上面,那时候SOA已经算是新技术了 ...

  9. Tomcat8史上最全优化实践

    Tomcat8史上最全优化实践 1.Tomcat8优化 1.1.Tomcat配置优化 1.1.1.部署安装tomcat8 1.1.2 禁用AJP连接 1.1.3.执行器(线程池) 1.1.4 3种运行 ...

  10. Winform中自定义ZedGraph右键复制成功后的提示

    场景 Winform中实现ZedGraph中曲线右键显示为中文: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100115292 ...