直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就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. A1119. Pre- and Post-order Traversals

    Suppose that all the keys in a binary tree are distinct positive integers. A unique binary tree can ...

  2. 【洛谷P3901】数列找不同

    题目大意:给定一个长度为 N 的序列,每个点被染了一个颜色.现有 M 个询问,每个询问查询区间 [l,r] 内的点是否颜色都是不同的. 题解:莫队裸题. 直接维护区间颜色数,用 cnt[] 记录下区间 ...

  3. (转)java 序列化ID的作用

    序列化ID的作用: 其实,这个序列化ID起着关键的作用,它决定着是否能够成功反序列化!简单来说,java的序列化机制是通过在运行时判断类的serialVersionUID来验证版本一致性的.在进行反序 ...

  4. java锁——wait,notify,synchronized

    背景:这篇博客用来总结java锁相关的知识点,平时还是要自己多加练习 wait 和 notify以及notifyAll (1).方法介绍1.wait.notify以及notifyAll都是Object ...

  5. golang与vscode的安装与配置

    一.golang的下载与安装 以下都是win10的安装与配置 go语言官方下载地址:https://golang.org/dl/ 找到适合你系统的版本下载 傻瓜式安装开始... 二.golang环境变 ...

  6. request 请求头的处理

    一.请求头:说明了请求要带的一些说明,有的请求需要带,有的不需要带 一般会带上格式,对于新浪微博来说,他一定要带上user-agent content-type:application/json 二. ...

  7. SpringCloud之Hystrix断路器以及dashboard 属性详解

    1.自定义hystrixCommand: https://blog.csdn.net/u012702547/article/details/78032191?utm_source=tuicool&am ...

  8. 最短路经算法简介(Dijkstra算法,A*算法,D*算法)

    据 Drew 所知最短路经算法现在重要的应用有计算机网络路由算法,机器人探路,交通路线导航,人工智能,游戏设计等等.美国火星探测器核心的寻路算法就是采用的D*(D Star)算法. 最短路经计算分静态 ...

  9. SQL Server 序列(SEQUENCE)使用

    众所周知,在之前的SQL SERVER版本中,一般采用GUID或者IDENTITY来作为标示符,但是IDENTITY是一个表对象,只能保证在一张表里面的序列,当我们遇到以下情况时, 如上表,我们需要在 ...

  10. Java中String和byte[]间的转换浅析

    Java语言中字符串类型和字节数组类型相互之间的转换经常发生,网上的分析及代码也比较多,本文将分析总结常规的byte[]和String间的转换以及十六进制String和byte[]间相互转换的原理及实 ...