/*** html节点字体大小随屏幕大小改变 用于rem布局***/
首先这是一个立即执行函数
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
hFont = 20 * (clientWidth / 375);
docEl.style.fontSize = hFont + 'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

web移动端适配的更多相关文章

  1. Web移动端适配总结

    移动端适配的相关概念以及几种方案总结 适配相关概念 布局视口(layout viewport):html元素的上一级容器即顶级容器,用于解决页面在手机上显示的问题.大部分移动设备都将这个视口分辨率设置 ...

  2. web移动端适配方案

    web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ...

  3. 浅谈web移动端适配问题

    一.布局方案 目前在解决移动端页面适配问题方案选择上,目前用得比较多是百分比布局,弹性布局flex,rem布局,本文将重点跟大家探讨rem布局. 二.viewport 在介绍rem布局之前,首先跟大家 ...

  4. 移动端web页面如何适配

    移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...

  5. web开发中移动端适配

    这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮 ...

  6. web前端--移动端适配总结

    转自:https://segmentfault.com/a/1190000011586301 作者:Devinnn meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码: < ...

  7. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

  8. 移动端适配单位rem

    0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...

  9. 移动端适配之雪碧图(sprite)背景图片定位

    为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...

随机推荐

  1. 夜话JAVA设计模式之策略模式

    策略模式     定义了算法簇,分别封装起来,让他们之间可以互相替换,让算法簇的变化独立于使用算法的客户.设计原则1     找出应用中可能需要变化之处,把他们独立出来,不要和那些不需要变化的代码混在 ...

  2. - > 强烈推荐!!!

    学长的微博总是能帮我们解决很多问题QAQ,超有用的: http://blog.csdn.net/cax1165/article/category/6294316/6

  3. ScrollView双击图片定点放大

    直接先说原理吧--原理:利用了scrollview的回调函数(如下)以及scrollview自己内部的一些缩放规则(其实我也还没弄清楚具体scrollview干了什么事),只是知道了它可以怎么做-_- ...

  4. 用JQuery实现选中select里面的option显示对应的div

    HTML: <select name=""  onchange="select(this)"> <option value="1&q ...

  5. 《WF in 24 Hours》读书笔记 - Hour 2(2) - Workflow:创建分支和传递参数

    1. 修改workflow1.xaml,添加Flowchart,添加Flowdesicion,添加CodeActivity2,并且名字改为下图所示: 2. CodeActivity1和2的代码如下: ...

  6. 从内核源代码配置文件预測泛泰新品(A920 ?)

    泛泰的IRON2 A910刚公布不久, 但近期在最新的泛泰890的内核源代码的config文件中又看到了这种编号,例如以下图: 图上ef63s 明显是A910S. 但这ef65s 又是什么呢, 看到这 ...

  7. 重啓ubuntu后 VNC 自動運行

    Vino-Server是Ubuntu自带的有個缺点:重启后不能自動運行(可能是基於安全吧!) 親身測試对象:windows & ubuntu 10.04已安装图形桌面gnome ***wind ...

  8. UML中类图的四种关系及其代码实现

    在uml图中 最复杂的也就是泛化,实现.依赖,关联.这四种关系了,假设弄清了这几种关系那么在理解UML图的时候就会变得轻车熟路了! 假设你对着几种关系一点都不熟悉的话能够看一下uml中的四种关系.这篇 ...

  9. 怎样一步步用D3画多曲线

    Bar Chart: http://bl.ocks.org/mbostock/3885304 这是一个画柱状图的基本形式. Axis是数轴: tickets是数轴上的标尺.tickets第二个參数% ...

  10. BZOJ 1798: [Ahoi2009]Seq 维护序列seq (线段树乘法加法的混合操作)

     题目:点击打开链接 大意:一个数组.三个操作.第一种是区间[a,b]每一个数乘乘,另外一种是区间[a,b]每一个数加c,第三种是查询[a,b]区间的和并对p取摸. 两种操作就不能简单的仅仅往下传 ...