/*** 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. bitset优化FLOYD HDU 3275

    Each of Farmer John's N cows (1 ≤ N ≤ 1,000) produces milk at a different positive rate, and FJ woul ...

  2. 浪潮服务器装机RAID

    下面是在装浪潮服务器NF8480M5收集的资料,但是NF8480M5服务器没有网上说的webBIOS界面需要按住DEL进BIOS,将启动都禁止了再重启,进入页面配置. http://blog.51ct ...

  3. 《Spring in action》之Spring之旅

    Spring框架作用是简化java开发的复杂性.下面是spring in action 对spring初步介绍. 一.主要有4种关键策略: 1. 基于POJO的轻量级和最小侵入性编程 . 2. 通过依 ...

  4. XA transaction ,JTA , two phase commit , GTX0-j

    本文主要是对以前一直迷惑的几个名字的学习. xa transaction 简单查了一下,大概就是 distributed  transaction. 相比传统的transaction而言,传统的tra ...

  5. How to Use DHCP Relay over LAN? - DrayTek Corp

    Assuming Vigor2960 has two LAN networks. Network Administrator wants that, when the internal DHCP is ...

  6. ios7新增api实现扫描二维码

    本来用的ZBar开源库实现的扫描二维码,可是貌似不支持arm64了,也没有在更新. 如今不用适配ios7下面.而iOS新增系统API已支持扫码,參考老外的一篇博客做了个demo.须要的能够參考下 參考 ...

  7. HDU 4005 The war(双连通好题)

    HDU 4005 The war pid=4005" target="_blank" style="">题目链接 题意:给一个连通的无向图.每条 ...

  8. 改动wordpress默认发邮件邮箱地址

    方法一: wordpress发送邮件默认是用的php mail函数.所以发送邮件的地址是能够随意写的.其默认发邮件的地址是wordpress@yourdomain.com.当然这个地址是能够改动的. ...

  9. android混合动画实现

    在android开发,我们会常常使用到动画,可是简单的一种动画(如旋转.缩放.渐变.位移等)有时候并不能满足我们项目的要求,这时候就须要运用到混合动画.那么在安卓中是怎样实现一个炫酷的混合动画,以下是 ...

  10. Project Euler:Problem 42 Coded triangle numbers

    The nth term of the sequence of triangle numbers is given by, tn = ½n(n+1); so the first ten triangl ...