首页 技术 正文
技术 2022年11月23日
0 收藏 581 点赞 3,160 浏览 2089 个字

引用js,自动算字体大小,响应式布局

<script>
  var iScale = 1;
  iScale = iScale / window.devicePixelRatio;
  document.write(‘<meta name=”viewport” content=”width=device-width,user-scalable=no,initial-scale=’ + iScale + ‘,minimum-scale=’ + iScale + ‘,maximum-scale=’ + iScale + ‘”>’);

  /* 动态设置字体大小*/
  function htmlFontSizeChange() {
    var iWidth = document.documentElement.clientWidth;
    document.getElementsByTagName(‘html’)[0].style.fontSize = iWidth / 16 + ‘px’;
    console.log(“1rem = ” + iWidth / 16);
  }
  htmlFontSizeChange();
  $(window).resize(function() {
    htmlFontSizeChange();
  });

</script>

<style>

  body{

    font-size:1rem; /*(16px)/(iWidth/16)  (iWidth设计图宽)*/

  }

</style>

示例

<!DOCTYPE html>
  <html>

  <head>
  <meta charset=”UTF-8″>
  <title></title>
  <script src=”https://code.jquery.com/jquery-3.1.1.min.js”></script>
  <script>
    var iScale = 1;
    iScale = iScale / window.devicePixelRatio;
    document.write(‘<meta name=”viewport” content=”width=device-width,user-scalable=no,initial-scale=’ + iScale + ‘,minimum-scale=’ + iScale + ‘,maximum-scale=’ + iScale + ‘”>’);

    /* 动态设置字体大小*/
    function htmlFontSizeChange() {
      var iWidth = document.documentElement.clientWidth;
      document.getElementsByTagName(‘html’)[0].style.fontSize = iWidth / 16 + ‘px’;
      console.log(“1rem = ” + iWidth / 16);
    }
    htmlFontSizeChange();
    $(window).resize(function() {
      htmlFontSizeChange();
    });
  </script>
  <style>
  span {
    font-size: 0.21333333rem;
    /*设计图大小为1200,16/(1200/16)*/
    /*font-size: 16px;*/
  }

  div {
    width: 0.4rem;
    /*30/(1200/16)*/
    /*width: 30px;*/
    background: red;
    height: 0.4rem;
  }
  </style>
  </head>

  <body>
    <span>设计图宽度为1200</span>
    <div></div>
  </body>

</html>

直接使用css设置rem

html{

  font-size:62.5%; /* 10÷16=62.5% */

}

body{

  font-size:12px;

  font-size:1.2rem ; /* 12÷10=1.2 */

}

媒体查询

@media only screen and (min-width: 481px){

  html {

    font-size: 94%!important;/* 15.04÷16=94% */

  }

}

@media only screen and (min-width: 561px){

  html {

    font-size: 109%!important; /* 17.44÷16=109% */

   }

}

@media only screen and (min-width: 641px){

  html {

    font-size: 125%!important;/* 20÷16=125% */

  }

}

引用来自 http://www.520ued.com/article/53e98eafbb16a74c41b5de77

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/140749.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:876 阅读:5,464
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,688
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,503
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:731 阅读:4,468
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:5,379
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,263
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站