引用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

rem字体响应式布局的更多相关文章

  1. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  2. rem+js响应式布局的设置

    直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就ok了 // rem响应式布局 (function(){ var html=document.querySelector('html') h ...

  3. rem在响应式布局中的应用

    rem/em/px/pt的基友关系 px 像素相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,根据其父元素来设置字体大小 pt point,是印刷行业常用单位,等于1/72英寸 rem ...

  4. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  5. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  6. 自适应布局,响应式布局以及rem,em区别

    一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...

  7. 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  8. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  9. CSS3移动端vw+rem不依赖JS实现响应式布局

    1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...

随机推荐

  1. arcgis制作风或水流速流向图

    制作风或水流速流向图 风速风向图或流速流向图相信大家都已经见过不少,但不知道有多少人会制作这样炫的专题图,下面这边文章向我们展示了当基本数据U和V矢量被存储时,怎样计算风或水流的速度和方向和对其进行符 ...

  2. Data Transformation / Learning with Counts

    机器学习中离散特征的处理方法 Updated: August 25, 2016 Learning with counts is an efficient way to create a compact ...

  3. C# 设计模式之工厂模式(一)

    写在前面,PS一句:笔记专用,轻拍勿喷,看的不爽绕路前行即可. 一.举栗说明 1.剧情:某银行财务有三位员工,分别为A.B.C三人,主要任务就是去银行取钱,如下: class EmloyeeA: { ...

  4. sql server之临时表

    一.临时表介绍 临时表在运行被创建的,虽说它的名字叫做临时表,可是对它的操作和我们平时操控表的操作基本一样, 比如最简单增.删.改.查等等.但是,需要注意的是临时表的创建是有范围限制的. 二.临时表分 ...

  5. java生成带logo的二维码,自定义大小,logo路径取服务器端

    package com.qishunet.eaehweb.util; import java.awt.BasicStroke; import java.awt.Graphics; import jav ...

  6. AOP (Aspect-OrientedProgramming)面向切面编程

    AOP OOP 面向对象编程 适合自上向下,却不适合自左向右 AOP把软件系统分为两个部分:核心关注点和横切关注点.业务处理的主要流程是核心关注点,与之关系不大的部分是横切关注点. 横切关注点的一个特 ...

  7. QT征程之初识qt

    下载 https://www.qt.io/cn/download-open-source/     下载QT离线安装包 Qt 5.5.1 for Linux 32-bit (546 MB) (info ...

  8. Xcode LaunchImage 载入界面大小设置

    iPhone Portrait iOS 8-Retina HD 5.5 (1242×2208) @3xiPhone Portrait iOS 8-Retina HD 4.7 (750×1334) @2 ...

  9. 无cookie下载Oracle otn上的sun jdk等软件

    从Oracle下载sun jdk提示:In order to download products from Oracle Technology Network you must agree to th ...

  10. 升级到macos sierra xcode8 requires additional components to support runing and debugging choose Install to add required components

    升级到macos sierra xcode8 报提示:requires additional components to support runing and debugging choose Ins ...