zoukankan      html  css  js  c++  java
  • font-size=62.5%——响应式字体的设置

    rem是相对于根元素html的默认或者自定义的文字大小进行缩放的,子元素是根元素html的字体大小缩放的。

    原理:相对于页面宽度的几分之几,相对页面宽度而言的,所以页面响应比较好。

    html默认的1rem==16px,在响应式布局中,一个个除来转换成rem,太麻烦,所以重置rem

    body{font-size=62.5%    /* 10/16=62.5%   */} 此时1rem = 10px;若是12px则是1.2rem.后面元素的具体的样式就是直接以rem做单位

    在body也可以自行转换回来。

    方法2:一般用这个的多些  这个是设置html的font-size ,1rem==此刻设置的文字的大小

    重置的代码(请放在css文件引入之前):750px的设计图  按照标注的像素直接1:1转换成rem就可以了  ,最后呈现的大小就是标注的像素的二分之一 这样前端实现ui图方便些

    (function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    var Size = Number(100 * (clientWidth / 750)).toFixed(2);
    if (Size < 42) {
    Size = 42;
    } else if (Size > 100) {
    Size = 100;
    } else {
    Size = Size;
    }
    var Size = Size + 'px';

    docEl.style.fontSize = Size;
    };
    console.log(docEl);
    recalc();
    win.addEventListener(resizeEvt, recalc, false);

    })(document, window);
  • 相关阅读:
    Silverlight的OOB特性 (转)
    B/S安全退出
    判断滚动条是否到达页面的尾部
    通过XmlSerializer序列化(对象)和反序列化(xml文件)
    SQL Server与ADO.Net数据类型对照
    在C#里使用属性,如Obsolete,Serializable,XmlRoot
    SQL求往年的工资和
    通过使用partition by 过滤重复项
    委托的协变与逆变代码
    Routing
  • 原文地址:https://www.cnblogs.com/changyuqing/p/5576776.html
Copyright © 2011-2022 走看看