直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就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. WebAPI集成SignalR

    WebAPI提供通用数据接口,SignalR提供实时消息传输,两者可以根据实际业务需求进行组合. 环境 版本 操作系统 Windows 10 prefessional 编译器 Visual Studi ...

  2. (转)ZooKeeper的Znode剖析

    ZooKeeper的Znode剖析 https://blog.csdn.net/lihao21/article/details/51810395 根据节点的存活时间,可以对节点划分为持久节点和临时节点 ...

  3. 震撼:多线程下的操作离不开synchronized

    昨天在写一个聊天程序,在发送消息的时候是采用单独的一个线程,接收消息是在另一个线程中完成. 我在测试的过程中发现,有的时候当消息比较多时,比如: 当我刚刚发送完一条消息,这个时候要将我发送的消息添加到 ...

  4. React之Perf

    import Perf from 'react-addons-perf' // ES6语法 var Perf = require('react-addons-perf') // ES5语法针对node ...

  5. P NP NPC

    study from : http://www.matrix67.com/blog/archives/105

  6. Oracle 的常用概念

    SQL优化(数据库的优化) 1. 尽量使用列名(不用*) 2. where解析顺序: 右--> 左 3. 自连接不适合操作大表 4. 尽量使用多表查询不使用子查询语句 5. 尽量不要使用集合运算 ...

  7. Unity Shader基本例子

    Unity中,对于一个物体我们想要改变其的外观,就需要给其增加一个材质,即Matiral 一般的Matiral采用的是标准的Shader,而标准的Shader并不是最好的渲染物体表明的效果,那么我们就 ...

  8. nginx 配置两个域名

    1.首先第一步安装: 参考:https://www.cnblogs.com/wyd168/p/6636529.html 启动: /usr/local/nginx/sbin/nginx -c /usr/ ...

  9. 快速入门Treap(代码实现)

    学习数据结构对我来说真的相当困难,网上讲\(Treap\)的我也看不太懂,前前后后花了大概六天才把\(Treap\)学会.为了避免再次忘记,这里我整理一下\(Treap\)的基础知识和模板. 阅读此文 ...

  10. (DFS)P1605 迷宫 洛谷

    题目背景 迷宫 [问题描述] 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和 终点坐标,问: 每个方格最多经过1次,有多少种从起点坐标到终点坐标的方案.在迷宫 中移动有上下 ...