JavaScript辅助响应式
js响应式
rem辅助响应式布局:其实就是指在HTML页面的大小不断变化的时候,里面的宽、高、字体等等也随之变化,主要是通过获取window.innerwidth的值来进行判断,7.5rem===100%===750px。
js响应式:就是通过navigator.userAgent.indexOf('Android')来获取不同的客户端版本,例如‘Android’,然后使用 window.resize()=function(){} 返回不同样式给客户端.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#div1{
/*7.5rem===100%*/
width: 3.75rem;
height: 1rem;
background: skyblue;
font-size: .7rem;
}
</style>
</head>
<body>
<div id="div1">
helloworld
</div>
<script>
// window.innerWidth === 768 === 7.5
// ?1rem === 768/7.5 === 1.x
//
//html字体大小最小是10px,再小就不行。
var html = document.querySelector('html')
html.style.fontSize = window.innerWidth/7.5 + 'px'
window.onresize = function(e){
console.log(e)
console.log(window)
html.style.fontSize = window.innerWidth/7.5 + 'px'
} </script>
</body>
</html>
rem辅助响应式布局
<!DOCTYPE html>
<html class="mobile">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.mobile #div1{
background: skyblue;
}
.pc #div1{
background: pink;
}
.pad #div1{
background: salmon;
}
#div1{
height: 100px;
}
.iphone #div1{
background: yellow;
}
.android #div1{
background: seagreen;
}
</style>
</head>
<body>
<div id="div1" > </div> <script type="text/javascript">
var html = document.querySelector('html') function resize(){
var screneLength = window.innerWidth;
html.style.fontSize = window.innerWidth/7.5 + 'px'
if(screneLength>640&&screneLength<960){
html.className = 'pad'
}else if(screneLength>=960){
html.className = 'pc'
}else{
html.className = 'mobile'
} if(navigator.userAgent.indexOf('Android')!==-1){
html.className = html.className + ' android'
}else if(navigator.userAgent.indexOf('iPhone')!==-1){
html.className = html.className + ' iphone'
}else if(navigator.userAgent.indexOf('iPad')!==-1){
html.className = html.className + ' ipad'
}
}
resize()
window.onresize = function(e){ resize()
}
</script>
</body>
</html>
js响应式
JavaScript辅助响应式的更多相关文章
- 由浅入深,带你用JavaScript实现响应式原理(Vue2、Vue3响应式原理)
由浅入深,带你用JavaScript实现响应式原理 前言 为什么前端框架Vue能够做到响应式?当依赖数据发生变化时,会对页面进行自动更新,其原理还是在于对响应式数据的获取和设置进行了监听,一旦监听到数 ...
- Javascript之响应式相册
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- amaze ui响应式辅助
amaze ui响应式辅助 响应式辅助 就是不同的显示屏幕,或者手机的横竖屏,你可以控制栏目的显影,还是挺有帮助的 视口大小 .am-[show|hide]-[sm|md|lg][-up|-down| ...
- 什么是响应式Web设计?怎样进行?
http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...
- 使用 jQuery Deferred 和 Promise 创建响应式应用程序
这篇文章,我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念,它们是 JavaScript 工具包(如Dojo和MochiKit)中非常重要的一个功能,最近也首 ...
- CSS3之响应式布局
在没有C3的时候,响应式布局是通过js来实现的. 开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以 ...
- 【响应式编程的思维艺术】 (1)Rxjs专题学习计划
目录 一. 响应式编程 二. 学习路径规划 一. 响应式编程 响应式编程,也称为流式编程,对于非前端工程师来说,可能并不是一个陌生的名词,它是函数式编程在软件开发中应用的延伸,如果你对函数式编程还没有 ...
- RxJS入门之函数响应式编程
一.函数式编程 1.声明式(Declarativ) 和声明式相对应的编程⽅式叫做命令式编程(ImperativeProgramming),命令式编程也是最常见的⼀种编程⽅式. //命令式编程: fun ...
- 如何实现广告响应式滚动 OwlCarousel2
githu https://github.com/OwlCarousel2/OwlCarousel2 OwlCarousel2 官方网址 http://owlcarousel2.githu ...
随机推荐
- TiDB注意事项
公司最近在上测试的TiDB集群,这款数据库类似MySQL,但又不完全一致,在使用的时候有一下注意事项,在这里记录一下.
- [转贴]infoQ VSTS被拆成5个部分,以Azure DevOps服务形式推出
VSTS被拆成5个部分,以Azure DevOps服务形式推出 http://www.infoq.com/cn/news/2018/09/vsts-divide5parts-azuredevops?u ...
- ACM数论之旅17---反演定理 第一回 二项式反演(神说要有光 于是就有了光(´・ω・`))
终于讲到反演定理了,反演定理这种东西记一下公式就好了,反正我是证明不出来的~(-o ̄▽ ̄)-o 首先,著名的反演公式 我先简单的写一下o( ̄ヘ ̄*o) 比如下面这个公式 f(n) = g(1) + g ...
- robotium学习及整理
一. Robotium 简介 Robotium是一款国外的Android自动化测试框架,主要针对Android平台的应用进行黑盒自动化测试,它提供了模拟各种手 ...
- Python2X和Python3X的区别
python2X:源码重复不规范python3X:整合源码,更清晰简单优美. python2X:默认的编码是ascii (解决办法为第一行添加 : #-*- encoding:ut ...
- zabbix短信(阿里云短信平台)与邮件报警
环境说明 操作系统 centos7 zabbix_server zabbix 4.0.3 python 3.6.5 短信平台 阿里云短信 zabbix_server配置信息 1 [root@cp-hb ...
- 腾讯下载的视频qlv格式转化为MP4格式
最近在看腾讯视频的时候发现下载下来的视频格式都是qlv格式,且不能用其他播放器播放,甚是恼怒,网上找了很多方法都很繁琐,于是自己写了一个小程序来处理这个问题.把下载下来的qlv格式转化为MP4格式 首 ...
- 使用简单zzupdate命令轻松升级Ubuntu到较新版本
zzupdate是一个开源的命令行实用程序,通过将几个更新命令组合到一个命令中,使得将Ubuntu桌面版和服务器版升级到更新版本的任务变得容易一些. 将Ubuntu系统升级到更新的版本并不是一项艰巨的 ...
- 【最小割/二分图最大独立集】【网络流24题】【P2774】 方格取数问题
Description 给定一个 \(n~\times~m\) 的矩阵,每个位置有一个正整数,选择一些互不相邻的数,最大化权值和 Limitation \(1~\leq~n,~m~\leq~100\) ...
- mac、linux 查看端口占用程序
lsof -i:80 列出占用 80 端口的程序 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME mysqld 672 ruby 42u IPv4 ...