rem+js响应式布局的设置
直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就ok了
// rem响应式布局
(function(){
var html=document.querySelector('html')
html.style.fontSize=window.innerWidth/7.5+'px'
window.onresize=function(e){
html.style.fontSize=window.innerWidth/7.5+'px'
}
})() //方式二
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375*100 + 'px';
//方式二方式三
(function(){
var html=document.querySelector('html')
html.style.fontSize=window.innerWidth/375*100+'px'
window.onresize=function(e){
html.style.fontSize=window.innerWidth/375*100+'px'
}
})()
rem+js响应式布局的设置的更多相关文章
- 理解rem实现响应式布局原理及js动态计算rem
前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...
- rem字体响应式布局
引用js,自动算字体大小,响应式布局 <script> var iScale = 1; iScale = iScale / window.devicePixelRatio; documen ...
- rem在响应式布局中的应用
rem/em/px/pt的基友关系 px 像素相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,根据其父元素来设置字体大小 pt point,是印刷行业常用单位,等于1/72英寸 rem ...
- JS 响应式布局
1.media 效果为屏幕宽度变化时,背景颜色也变化 <!DOCTYPE html> <html lang="en"> <head> <m ...
- js响应式布局
<!DOCTYPE html> <html class="mobile"> <head> <meta charset="UTF- ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3移动端vw+rem不依赖JS实现响应式布局
1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...
- 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景
媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...
- 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配
Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...
随机推荐
- bzoj2252 矩阵距离
很好奇这种 普及- 的题为什么会是权限题...... 我一开始想用枚举 + 搜索,看书后发现自己脑抽了.直接BFS即可. #include <cstdio> #include <qu ...
- Linux基本命令总结(一)
java开发的服务器一般都是linux系统,因此把有关命令小结一下: 1,cd [目录名] 进入相应的目录下. cd / 进入系统的根目录 cd .. 或者 cd .. // 退入当前位置的上级目录 ...
- 使用selenium 模拟人操作请求网页
首先要 pip install selenium 安装插件 然后要下载驱动驱动根据你的浏览器 Chrome selenium 驱动下载地址 http://chromedriver.storage. ...
- win32-api: 让 static 控件中的水平横行,垂直居中。
CreateWindowEx(....., SS_CENTER | SS_CENTERIMAGE); SS_CENTER 能让文字水平居中. SS_CENTERIMAGE 能让文字垂直居中. htt ...
- Oracle 在JDBC中使用 存储过程,包
前提: 在Oracle中已经定义 存储过程 和 存储函数 和 包 导入了Oracle的JDBC jar 包 package demo; import java.sql.Connect ...
- bigdata learning unit two--Spark environment setting
1.下载 Spark安装之前的准备 文件的解压与改名 tar -zxvf spark-2.2.0-bin-hadoop2.7.tgz rm -rf spark-2.2.0-bin-hadoop2.7. ...
- tuple数组、文件操作
halcon自带案例的学习. Tuple1 := [,,,,] //数组 Number := |Tuple1| //元素个数 SingleElement := Tuple1[] Part := Tup ...
- Explicit Constructors(显式构造函数)
按照默认规定,只有一个参数的构造函数也定义了一个隐式转换,将该构造函数对应数据类型的数据转换为该类对象,如下面所示:class String {String ( const char* p ); // ...
- bzoj2938 AC自动机 + 拓扑排序找环
https://www.lydsy.com/JudgeOnline/problem.php?id=2938 题意:给出N个01病毒序列,询问是否存在一个无限长的串不存在病毒序列 正常来说,想要寻找一个 ...
- bzoj4034 线段树+dfs序
https://www.lydsy.com/JudgeOnline/problem.php?id=4034 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 ...