zoukankan      html  css  js  c++  java
  • 关于移动端rem布局

    之前做web app开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 1136标准,所以高度一般取个大概值,各种图标的宽高也是取平衡值写死,然后部分样式通过媒体查询来设置,例如背景图的多倍图、基础字体大小、图标宽高。
    解决方案的简单介绍: 基于rem
    解决方案的简单介绍: 基于rem
    给根节点设置一个基础值,然后页面的所有元素布局均相对于该font-size值采用单位设定。那么基础的font-size值该如何取呢?
    可在script标签加上如下代码
    (function(doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
    var clientWidth = docEl.clientWidth;
    if(!clientWidth) return;
    if(clientWidth >= 640) {
    docEl.style.fontSize = '100px';
    } else {
    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
    }
    };
     
    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
     
    对上述js代码的解释:假如通过媒体查询设置font-size,只能解决一部分的情况,而且并不能完成适配,因为手机屏幕宽度类型实在太多了,所以font-size的取值要通过js计算,取当前viewport的deviceWidth与设计稿的宽 的 比例值,例如:我们的设计稿尺寸都是640px的,iphone5的deviceWidth是320px,那么计算出来的font-size值就是 320 / 640 = 0.5,因为得出的font-size太小,不方便计算,且有的浏览器可能不兼容太小字号,所以将font-size放大100倍,所以最终计算出来的font-size为 320 / 640 * 100 = 50(px); 当然,这个值是根据设计稿来计算的
     
    例如:一个设计稿宽高为140px的div,左边距为50px,那么它的css应该这样写
    div {
    1.4rem; /* 像素换算rem:140px / 100 = 1.4rem */
    height: 1.4rem;
    margin: 0 0 0 .5rem;
    }
    因为html的font-size是放大了100倍,所以计算rem时,要用设计稿的实际像素除以100,140px / 100 = 1.4rem; 最后实际的像素大小就会由deviceWidth跟设计稿的横向宽 的 比例 自动计算出来。
     
    那么其他元素的字体大小该如何设置?
    网易跟淘宝的做法都是使用额外的媒体查询设置几种字体大小,例如:
     
    @media screen and (max- 320px) {
    body{font-size: 14px;}
    }
    @media screen and (min- 321px) and (max- 413px) {
    body{font-size: 16px;}
    }
    @media screen and (min- 414px) and (max- 639px) {
    body{font-size: 17px;}
    }
    @media screen and (min- 640px) {
    body{font-size: 18px;}
    }
    可为什么不用rem呢?后来去查了一番资料,发现有一种叫做点阵字体的存在(什么是点阵字体),也叫作位图字体,位图我们都知道,跟矢量图是有区别的,就是放大会模糊,所以点阵字体也是放大会模糊的,如果根据rem设置字体大小,字体会自由缩放,可能就会导致点阵字体模糊,所以需要设定使用几种固定大小的字体。不过,在正常情况下,系统自带的字体都是矢量字体,所以使用rem为单位是没有问题的,除非你的网页需要用到特殊的点阵字体。
     
    总结:如果网页没有用到特殊的点阵字体,字体单位使用rem,如果用到了点阵字体,字体需要通过媒体查询设置几种固定大小的字体
     
     
  • 相关阅读:
    linux 内核优化
    ip_forward与路由转发
    mysql 集群 galera
    mysql 中间件 mycat
    mysql 主-主-从-从
    mysql 主从复制
    mysql 备份
    mysql 日志
    java中四种权限修饰符区别
    Java中关于Math的几个取整方法的区别
  • 原文地址:https://www.cnblogs.com/catcher-m/p/6056330.html
Copyright © 2011-2022 走看看