直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就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. 【CF1119E】Pavel and Triangles

    题目大意:有 N 种长度的边,第 i 种长度为 \(2^i\),给定一些数量的这些边,问最多可以组合出多少种三角形. 题解:应该是用贪心求解,不过选择什么样的贪心策略很关键. 首先分析可知,两个较大边 ...

  2. C++ 容器操作

    typedef struct point { int x; int y; }Point; 在声明变量的时候就可以:Point p1; 如果没有typedef, 如: struct point { in ...

  3. 斯坦福大学公开课机器学习:advice for applying machine learning | model selection and training/validation/test sets(模型选择以及训练集、交叉验证集和测试集的概念)

    怎样选用正确的特征构造学习算法或者如何选择学习算法中的正则化参数lambda?这些问题我们称之为模型选择问题. 在对于这一问题的讨论中,我们不仅将数据分为:训练集和测试集,而是将数据分为三个数据组:也 ...

  4. Day7--Python--基础数据类型补充,集合,深浅拷贝

    一.基础数据类型补充 1.join() 把列表中的每一项(必须是字符串)用字符串拼接 与split()相反 lst = ["汪峰", "吴君如", " ...

  5. Day3--Python--字符串,for循环,迭代

    常见的基本数据类型: 1.int 整数 主要用来进行数学运算 2.bool 布尔. 判断真假. if 和 while循环中常用 3.str 字符串,一般放小量数据 4.list 列表.可以存放大量的数 ...

  6. pytest 7 assert断言

    前言:断言是自动化最终的目的,一个用例没有断言,就失去了自动化测试的意义了. 断言用到的是 assert关键字.之前的介绍,有的测试方法中其实用到了assert断言.简单的来说,就是预期的结果去和实际 ...

  7. c#线程2

    多线程中很有可能存在争夺一个变量资源而产生死锁或者不被期望的结果. 测试类; class TestClass { ; private object objLock = new object(); pu ...

  8. 二维数组过滤,根据多个条件获取二维数组中指定的arr

    /** * 二维数组过滤,根据多个条件获取二维数组中指定的arr * @param $data_arr * @param $lm_number * @param $source_type * @par ...

  9. 递归思维判断数组a[N]是否为一个递增数组

    递归的方法:记录当前最大的,并且判断当前的是否比这个还大,大则继续,否则返回false结束: bool fun( int a[], int n ) { ) { return true; } ) { ] ...

  10. angular 中如果表单有相同的name一般会出现如下错误

    Unhandled Promise rejection Cannot assign to a reference or variable