移动端屏幕自适应js与rem
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="telephone=no" name="format-detection" />
<meta name="format-detection" content="email=no" />
<meta http-equiv="Cache-Control" content="no-cache"/>
html{font-size: 20px;width: 100%;height: 100%;}
body{margin: 0;padding: 0;}
<script>
//orientationchange方向改变事件
(function (doc, win) {
var docEl = doc.documentElement,//根元素html
//判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法。
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//把document的fontSize大小设置成跟窗口成一定比例的大小,从而实现响应式效果。
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
//alert(docEl)
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数:第一个是事件名称比如点击事件onclick,第二个是要执行的函数,第三个是布尔值
doc.addEventListener('DOMContentLoaded', recalc, false)//绑定浏览器缩放与加载时间
})(document, window);
//alert(document.documentElement.clientWidth/320)
</script>
移动端屏幕自适应js与rem的更多相关文章
- css中添加屏幕自适应方法(rem)
css中添加屏幕自适应方法(rem) 只需要在公共css文件中添加下面代码:设计稿以750px,基础字体为20px为例,兼容性高,使用过程中px转化为rem即可 /*竖屏*/ @media scree ...
- 【前端开发】移动端适配方案js,rem单位转换,640设计稿20px=1rem
! function() { var style = document.createElement("STYLE"), docEl = document.documentEleme ...
- vant vue 屏幕自适应
手机端 pc端 屏幕自适应 一.新建 vue.config.js项目目录中没有 vue.config.js 文件,需要手动创建,在根目录中创建 vue.config.js const pxtorem ...
- 移动端canvas文字图片合成并生成图片(canvas宽度自适应移动端屏幕)
这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...
- 移动端web app要使用rem实现自适应布局:font-size的响应式
关于webAPP的开发最主要解决的就是“自适应自适应布局”.常规的适配有很多做法,例如:流式布局.限死宽度等,但是这些方案都不是最佳的解决方法,而最满足设计需要的是: 元素可以根据屏幕大小而等比列变 ...
- 移动 web 端屏幕适配 - rem
前言 最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用.接下来,把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来. rem 介 ...
- vue-cli 项目里屏幕自适应
很多同学可能在写h5的时候,也会遇到移动端如何控制屏幕自适应问题!在移动端网页开发中,我们可以用手机淘宝的flexible.那么在vue当中,也同样可以用!接下来就介绍下如何在vue-cli配置的项目 ...
- vue-cli脚手架里如何配置屏幕自适应
很多同学可能在写h5的时候,也会遇到移动端如何控制屏幕自适应问题!在移动端网页开发中,我们可以用手机淘宝的flexible.那么在vue当中,也同样可以用!接下来就介绍下如何在vue-cli配置的项目 ...
- 真的,移动端尺寸自适应与dpr无关
做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解. 1. 什么是尺寸自适应 首先标题说的自适应, ...
随机推荐
- 《学习Opencv》第五章 习题6
这是第五章 习题5.6的结合版,其中实现了摄像头抓拍功能,能够成功运行. #include "stdafx.h" #include "cv.h" #includ ...
- OSSchedLock()函数透析
uC/OS-II的OSSchedLock()和OSSchedUnlock()函数允许应用程序锁定当前任务不被其它任务抢占. 使用时应当注意的是:当你调用了OSSchedLock()之后,而在调用OSS ...
- oracle 的一点累积
1. oracle用户相关 sqlplus sys/oracle as sysdba -- sys登录 create user xxx identified by password; -- ...
- Borg Maze poj 3026
Description The Borg is an immensely powerful race of enhanced humanoids from the delta quadrant of ...
- Emag eht htiw Em Pleh
Emag eht htiw Em Pleh This problem is a reverse case of the problem 2996. You are given the output o ...
- android之apk自动更新解析包失败问题
在apk自动更新(相关问题可以看我的博客http://blog.csdn.net/caicongyang) 从服务器下载完成后,点击notification提示安装时,每次都报解析包失败错误!首先我想 ...
- redis数据过期策略【转】
key的过期时间通常,Redis key被创建时不会自动关联过期时间,key将长久存在,除非通过DEL等命令显示的删除.EXPIRE命令簇可以为指定的key关联一个过期时间,代价是一点额外的内存开销. ...
- (转载)URL与URI的区别
(转载)http://blog.csdn.net/eagle51998/article/details/372052 1 URL(Uniform Resoure Locator:统一资源定位器)是W ...
- [Audio processing] 数据集生成 & 性别年龄分类训练 Python
1.重命名,Python中文路径各种错误,所以需要先将所有文件的路径名全都改成中文.用的是MAC系统,所以WIN下的命令行批处理没法解决,所以用C来完成 // Created by Carl on 1 ...
- POJ 2376 贪心
题意:FJ希望它的牛做一些清洁工作.有N只牛和T个时间段,每只牛可以承担一段时间内的工作.FJ希望让最小数量的牛覆盖整个T,求出其数量.若无法覆盖整个T,则输出-1. 分析:首先要注意T表示T个时间段 ...