zoukankan      html  css  js  c++  java
  • rem的基准字体大小的设置

    1.移动端 UI 给的设计稿通常是640px、720px、750px的宽度,但是我们要做适配,兼容不同的终端,rem布局是比较常用的一种方式,比较关键的是确定根节点的字体大小。

    这里以640px为例,用代码写一下:

     1 window.onresize = function(){
     2     var maxWidth = document.documentElement.clientWidth;
     3     if(maxWidth > 640){
     4         maxWidth = 640;
     5     }
     6     document.documentElement.style.fontSize = ((maxWidth / 640) * 16) + 'px';
     7 };
     8 var maxWidth = document.documentElement.clientWidth;
     9 if(maxWidth > 640){
    10     maxWidth = 640;
    11 }
    12 document.documentElement.style.fontSize = ((maxWidth / 640) * 16) + 'px';

    在使用的时候,可以将这个部分放在一份单独的文件夹中,命名为fontSize.js,也比较好区分于别的js文件。

    如果你的设计稿是别的尺寸的,可以将我们上述fontSize.js中的640修改为自己设计稿的宽度的实际尺寸。

    移动端的最小尺寸一般是320px,最大尺寸为设计稿的尺寸,上面我们得出的是1rem的值。

    2.flexible.js插件也可以解决同样的问题,使用起来也很简单、方便,有兴趣的同学自己了解一下,有时间跟大家再分享一下这个flexible.js插件。

  • 相关阅读:
    WEB环境安装步骤v1.2
    将m3u8格式转成mp4格式
    MySQL简介及安装v0.1
    使用脚本pull阿里云的k8s镜像并更改标签
    常用脚本
    常用命令
    记录一下环境变量IFS特定场景使用技巧
    hp-unix创建和更改LV
    HP-UNIX常用命令
    Linux集群搭建
  • 原文地址:https://www.cnblogs.com/helena000/p/6123365.html
Copyright © 2011-2022 走看看