直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就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响应式布局的设置的更多相关文章

  1. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  2. rem字体响应式布局

    引用js,自动算字体大小,响应式布局 <script> var iScale = 1; iScale = iScale / window.devicePixelRatio; documen ...

  3. rem在响应式布局中的应用

    rem/em/px/pt的基友关系 px 像素相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,根据其父元素来设置字体大小 pt point,是印刷行业常用单位,等于1/72英寸 rem ...

  4. JS 响应式布局

    1.media 效果为屏幕宽度变化时,背景颜色也变化 <!DOCTYPE html> <html lang="en"> <head> <m ...

  5. js响应式布局

    <!DOCTYPE html> <html class="mobile"> <head> <meta charset="UTF- ...

  6. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  7. CSS3移动端vw+rem不依赖JS实现响应式布局

    1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...

  8. 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  9. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

随机推荐

  1. A1134. Vertex Cover

    A vertex cover of a graph is a set of vertices such that each edge of the graph is incident to at le ...

  2. A1076. Forwards on Weibo

    Weibo is known as the Chinese version of Twitter. One user on Weibo may have many followers, and may ...

  3. Django 子程序

    在Web应用中,通常有一些业务功能模块是在不同的项目中都可以复用的,故在开发中通常将工程项目拆分为不同的子功能模块,各功能模块间可以保持相对的独立,在其他工程项目中需要用到某个特定功能模块时,可以将该 ...

  4. 基于RBAC模型的权限系统设计(Github开源项目)

    RBAC(基于角色的访问控制):英文名称Rose base Access Controller.本博客介绍这种模型的权限系统设计.取消了用户和权限的直接关联,改为通过用户关联角色.角色关联权限的方法来 ...

  5. day-04(jquery)

    回顾: js: 组成部分: ECMAScript BOM DOM 变量声明 var 变量名=初始化值; 数据类型: 原始类型 Undefined Null String Number Boolean: ...

  6. 创建免密码sudo用户

    创建免密码sudo用户 #!/bin/bash c1=`grep -w 'bkuser' /etc/passwd | wc -l` ]; then echo "bkuser已经存在" ...

  7. bzoj2049 线段树 + 可撤销并查集

    https://www.lydsy.com/JudgeOnline/problem.php?id=2049 线段树真神奇 题意:给出一波操作,拆边加边以及询问两点是否联通. 听说常规方法是在线LCT, ...

  8. docker swarm(当前官网示例)

    介绍 Docker Swarm 是 Docker 公司推出的官方容器集群平台,基于 Go 语言实现 作为容器集群管理器,Swarm 最大的优势之一就是 100% 支持标准的 Docker API.各种 ...

  9. HDU 1022(火车过站 栈)

    题意是给定火车进站的序列和出站的序列,问能否完成转换,若能输出过程. 和另一道以火车进站为背景的栈应用题类似,但增加了对于过程的输出,只需要多记录一下进出站顺序即可. #include <bit ...

  10. 【自适应波束形成】MVDR(Minimum Variance Distortionless Response )笔记

    参考: https://blog.csdn.net/qq_40981790/article/details/80143524 1. MVDR简介(Minimum Variance Distortion ...