辞职有半个月了,面试了几家公司,还在挣扎中。。。。

不废话,H5页面适配成响应式,可以用百分比或者rem.

rem是相对于html根元素的单位,可以根据根元素的大小做出等比缩放,

通常,假如设置,html{font-size:100px;},那么,1rem=100px;

那么如何做到响应式呢?我们需要一点JS代码:

(function(win) {
var doc = win.document;
var docEl = doc.documentElement;
var tid; function refreshRem() {
var width = docEl.getBoundingClientRect().width;
//alert(width);
if (width > 650) { // 最大宽度
// width = 540;
docEl.style.fontSize=100+"px";
}else{
docEl.style.fontSize=40+"px";
}
//var rem = width / 10; // 将屏幕宽度分成10份, 1份为1rem
//docEl.style.fontSize = rem + 'px';
} win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false); refreshRem(); })(window);

  代码可以根据自己的需要进行修正,需要请拿走,不谢。。。

H5 前端页面适配响应式的更多相关文章

  1. Web移动前端开发-——bootstarp响应式框架

    移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 小于768的为超小屏幕 ...

  2. 前端页面适配的rem换算

    为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类 ...

  3. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  4. web页面之响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  5. h5和css3构建响应式网站

    响应式页面组成 灵活图像,媒体:资源尺寸使用百分比定义 流式布局,所有width属性使用百分比设定,水平属性通常使用相对单位(em,百分数,rem等) 媒体查询,根据媒体特征进行设计调整 创建可伸缩图 ...

  6. web前端-移动端响应式与自适应

    一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,代码如下: <meta name="v ...

  7. 前端页面适配的rem换算 为什么要使用rem

    之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推. 但直接这样强制 ...

  8. python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  9. 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

随机推荐

  1. Linux服务器管理: 系统的进程管理pstree命令

    pstree命令是查看进程树或者结构的命令 [root@localhost~]#pstree [选项]  需要注意的是不能将 -p和-u同时使用 如果同时使用前者生效后者无效但并不报错 选项: -p: ...

  2. highstock 的tooltip框里面的内容 保留两位小数的办法

    $("#flux_chart_container").highcharts('                           },            borderWidt ...

  3. 使用python标准库urllib2访问网页

    #访问不需要登录的网页import urllib2target_page_url='http://10.224.110.118/myweb/view.jsp' f = urllib2.urlopen( ...

  4. 字符编码-UNICODE,GBK,UTF-8区别【转转】

    字符编码介绍及不同编码区别 今天看到这篇关于字符编码的文章,抑制不住喜悦(总结的好详细)所以转到这里来.转自:祥龙之子http://www.cnblogs.com/cy163/archive/2007 ...

  5. PHP输出缓冲(Output Buffering)

    什么是缓冲区? 简单而言,缓冲区的作用就是,把输入或者输出的内容先放进内存,而不显示或者读取.至于为什么要有缓冲区,这是一个很广泛的问题~其实缓冲区最本质的作用就是,协调高速CPU和相对缓慢的IO设备 ...

  6. 使用Minify来优化网站性能

    Minify 是用PHP5开发的应用,通过遵循一些Yahoo的优化规则来提高网站的性能.它会合并多个CSS或者JavaScript文件,移除一些不必要的空格和注释,进行gzip压缩,并且会设置浏览器的 ...

  7. [译]Mongoose指南 - Document

    更新 有几种方式更新document. 先看一下传统的更新方法 Tank.findById(id, function(err, tank){ if(err) return handleError(er ...

  8. 使用 Flexbox 的居中布局

  9. linux 驱动 工作队列

    http://blog.sina.com.cn/s/blog_78d30f6b0102uyaf.html http://blog.csdn.net/lyc_stronger/article/detai ...

  10. leofs存储总结

    1.leofs角色 Account(账户).Bucket(对象桶).Object(对象), gateway.manager0.manager1.storage Account 一个account可以创 ...