web移动端适配
/*** 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移动端适配的更多相关文章
- Web移动端适配总结
移动端适配的相关概念以及几种方案总结 适配相关概念 布局视口(layout viewport):html元素的上一级容器即顶级容器,用于解决页面在手机上显示的问题.大部分移动设备都将这个视口分辨率设置 ...
- web移动端适配方案
web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ...
- 浅谈web移动端适配问题
一.布局方案 目前在解决移动端页面适配问题方案选择上,目前用得比较多是百分比布局,弹性布局flex,rem布局,本文将重点跟大家探讨rem布局. 二.viewport 在介绍rem布局之前,首先跟大家 ...
- 移动端web页面如何适配
移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...
- web开发中移动端适配
这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮 ...
- web前端--移动端适配总结
转自:https://segmentfault.com/a/1190000011586301 作者:Devinnn meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码: < ...
- 【转载】Web移动端Fixed布局的解决方案
特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- 移动端适配之雪碧图(sprite)背景图片定位
为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...
随机推荐
- iptables中增加/删除/查询/修改的基本操作
虽然在Ubuntu使用了UFW来简化iptables的操作,但是UFW只针对防火墙方面,转发方面没有涉及,所以要弄懂其中的原理,还是必须回归到iptables中.CentOS也是如此.下面是针对ipt ...
- Java实现打印功能-AWT Graphics2D
Java实现打印功能 用java实现打印,java.awt中提供了一些打印的API,要实现打印,首先要获得打印对象,然后继承Printable实现接口方法print,以便打印机进行打印,最后用用Gra ...
- Weblogic补丁升级操作手冊
1.查看Weblogic版本号 方法一 [weblogic@Weblogic201 ~]$ cd /home/weblogic/Oracle/Middleware/wlserver_10.3/serv ...
- android 日历
[1].[代码] [Java]代码 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...
- jQyery 整体架构
jQuery的模块 一.jQuery一共有13个模块: 1. 核心方法 2. 回调模块(callbacks) 3. 数据缓存 4. 异步队列(Deffered) 5. 选择器操做 6. 属性操作 7. ...
- 设计模式(一)单例模式:创建模式 ASPNET CORE WEB 应用程序的启动 当项目中 没有STARTUP.CS 类如何设置启动 配置等等
设计模式(一)单例模式:创建模式 先聊一下关于设计的几个原则(1)单一原则(SRP):一个类应该仅有一个引起它变化的原因 :意思就是 (一个类,最好只负责一件事情,并且只有一个引起它变化的原因(2)开 ...
- WAMP 2.5 "FORBIDDEN" error
对于web开发人员来说.远程訪问站点能够非常方便的提高开发站点开发效率,那么在wamp环境下,默认仅仅支持本地訪问,那么怎样訪问开启远程站点訪问呢? 开启方法: wamp2.5(32bit) 集成环境 ...
- 快速编译system.img和boot.img的方法【转】
本文转载自:http://www.cnblogs.com/wanqieddy/archive/2012/10/22/2734024.html 快速编译system.img,可以使用这个命令: #mak ...
- go语言笔记——数组长度不可变,但是元素值是可变的!!!
数组声明的格式是: var identifier [len]type 例如: var arr1 [5]int 在内存中的结构是: 对索引项为 i 的数组元素赋值可以这么操作:arr[i] = valu ...
- perl数组的长度与元素个数
perl数组的长度与元素个数 $#数组名 ---表示数组中最后一个元素的下标,它等于元素个数减1. @数组名 ---表示数组中元素的个数. $标量=@数组名 ---将一个数组赋值给一个标量变量,标量得 ...