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

    题目大意:给定一个 N 个点,M 条边的有向图,点有点权,边有边权,求该有向图中的一个环,使得环上点权和与环上边权和之比最大. 题解:0/1 分数规划思想,每次二分一个 mid,在新图上跑 spfa, ...

  2. UOJ176 新年的繁荣

    题目链接 Boruvka生成树算法 \(Boruvka\)算法就是先把每个点看作一个联通块,然后不断在联通块之间找最优的边进行合并.因为每次联通块的数量最少缩小一半.所以合并次数是\(log\)的 先 ...

  3. [luogu1552][派遣]

    题目链接 思路 首先肯定要树形dp,一直没想到怎么用左偏树.如果不断弹出又不断地合并复杂度不就太高了.瞄了眼题解才知道可以直接用大根树.然后记录出当前这棵左偏树的大小(树里面所有点的薪水之和)以及点的 ...

  4. 高DPI下界面错乱的解决方法和原理

    来源: http://bbs.csdn.net/topics/370177760 我在win32 + c写的界面中解决办法,就是把字体的字号给固定了,这样做的结果就是,不管dpi是否有改变,界面中控件 ...

  5. 外显子分析思路总结(Exome Sequencing Analysis review)

    趁着周末,大好的日子,总结了一下外显子分析的思路(套路)

  6. bzoj2733 离线+并查集+主席树

    https://www.lydsy.com/JudgeOnline/problem.php?id=2733 网上清一色的合并线段树题解,我又不会,只能自己胡来,没想到Rush过去了 永无乡包含 n 座 ...

  7. data_type

    import logging logger = logging.getLogger("simple_example") logger.setLevel(logging.DEBUG) ...

  8. python IDLE颜色设置

    相信刚学习python的朋友们,都还是挺喜欢python自带的IDLE,但是白的代码背景色以及其它的代码色如何更改呢? Step1:找到config-Highlight.cfg文件,win在C:\Us ...

  9. saltstack SLS

    SLS文件定义 SLS(代表SaLt State文件)是Salt State系统的核心.SLS描述了系统的目标状态,由格式简单的数据构成.这经常被称作配置管理 top.sls 是配置管理的入口文件,一 ...

  10. java io系列05之 ObjectInputStream 和 ObjectOutputStream

    本章,我们学习ObjectInputStream 和 ObjectOutputStream ObjectInputStream 和 ObjectOutputStream 介绍 ObjectInputS ...