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

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

 window.onresize = function(){
var maxWidth = document.documentElement.clientWidth;
if(maxWidth > 640){
maxWidth = 640;
}
document.documentElement.style.fontSize = ((maxWidth / 640) * 16) + 'px';
};
var maxWidth = document.documentElement.clientWidth;
if(maxWidth > 640){
maxWidth = 640;
}
document.documentElement.style.fontSize = ((maxWidth / 640) * 16) + 'px';

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

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

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

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

rem的基准字体大小的设置的更多相关文章

  1. sublime中侧边栏字体大小的设置

    sublime这个编辑器相当强大,但是它的侧边栏字体实在是太小了,实在是反人类的设计,幸好它给了我们修改的机会 第一步:下载PackageResourceViewer插件,通过PackageContr ...

  2. Eclipse 改变字体大小,设置背景色

    Eclipse背景颜色修改: 操作界面默认颜色为白色.对于我们长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以我经常会改变workspace的背景色,使眼睛舒服一些.设置方法如下: 1.打开win ...

  3. css颜色,字体大小的设置

    设置字体的颜色通过下面的代码: color : #f00; color是颜色的意思,color用来设置一个标签的前景色,表现出来也就是元素文本的颜色. 它的值,一般都是使用#加16进制的颜色值来表示. ...

  4. jQuery之字体大小的设置

    先获取字体大小,进行处理. 再将修改的值保存. slice() 方法可从已有的数组中返回选定的元素.arrayObject.slice(start,end).start     必需.规定从何处开始选 ...

  5. Android系统移植与调试之------->如何修改Android默认字体大小和设置里面字体大小比例

    因为我修改 ro.sf.lcd_density的值,将它从160修改 为120,所以导致整个系统的字体都变得很小.因此需要将整个字体变大,并且在设置-->显示-->字体大小的4个选项的值都 ...

  6. Android Studio 主题、字体大小的设置

    1. Android Studio 主题的设置: 设置Android Studio 自带的主题 设置第三方主题 2. Android Studio 字体的设置 设置左面包名的字体大小 设置右面代码编辑 ...

  7. rem布局和使用js rem动态改变字体大小,自适应

    解决rem文字动态改变字体大小: <script> console.log(window.devicePixelRatio); var iScale = 1; iScale = iScal ...

  8. Pycharm 字体大小快捷方式设置

    1.File->Settings 2.在搜索框搜索increase 点击Increase Font Size(增大字体)右键选择 Add Mouse Shortcut 然后按Ctrl并且鼠标滚轮 ...

  9. 使用js rem动态改变字体大小,自适应

    <html> <head> <meta charset="utf-8"> <script> console.log(window.d ...

随机推荐

  1. 【静态NAT】 为什么子网可以ping父网,但是父网ping不通子网?

    为什么子网可以ping父网,但是父网ping不通子网? 这就好比在公网中ping一个192.168.0.x的子网,roter无法找到这个子网的地址,所以会把package丢掉. 如何解决呢,可以在路由 ...

  2. 基于List数组转换成tree对象

    package com.shjysoft.yunxi.sync.webservice; import java.util.ArrayList;import java.util.Date;import ...

  3. VirtualBox中安装CentOS使得在ssh和外网都能正常链接

    一.网卡模式选择 网卡1:Host-only 用于主宿机互访,这是主宿机通过192.168.56.X这一网络通信,主机是否能上网不影响双方通信 网卡2:NAT 宿机用这一网卡通过主机上网 二.具体配置 ...

  4. Qt实现炫酷启动图-动态进度条

    目录 一.简述 二.动效进度条 1.光效进度条 2.延迟到达进度条 3.接口说明 三.启动图 1.实现思路 2.背景图切换 四.测试 1.构造启动图 2.背景图 3.其他信息 4.事件循环 五.源码 ...

  5. oraclesql遇见的问题(一)

    在oracle的数据库,对于字段为null的字段过滤条件只能用is null 或者 is not null,不能使用 != , <> , = 判断, 今天进行接口测试时,发现获取到的数据缺 ...

  6. mybatis的插入与批量插入的返回ID的原理

    目录 背景 底层调用方法 单个对象插入 列表批量插入 完成 背景 最近正在整理之前基于mybatis的半ORM框架.原本的框架底层类ORM操作是通过StringBuilder的append拼接的,这次 ...

  7. 作者联系方式D1

    欢迎大伙投稿,审核通过免费发布. 奥特曼超人 KARL-Dujinyang QQ:  309933706   QQ:  1875125470 工作时间都会在线. 偶尔博客,不过有问题可以加Q来找我讨论 ...

  8. linux应用程序设计--Makefile工程管理

    Makefile文件描述了整个工程的编译.链接等规则.包括:工程中哪些源文件需要编译以及如何编译:需要创建哪些库文件以及如何创建这些库文件.如何产生最终的可执行文件. Makefile相关术语 1.规 ...

  9. 文件传输——TCP/IP协议介绍总结

    一.链路层 数据链路层的工作特性: 1.为IP模块发送和接收IP数据报2.为ARP模块发送ARP请求和接收ARP应答(ARP:地址解析协议,将IP地址转换成MAC地址)3.为RARP发送RARP请求和 ...

  10. 动态规划(1)——最长子序列(LCS)问题

    最长子序列问题:从中找出最长的字符序列,比如: cnblogs和belong.这两个字符串的最长子序列就是blog. 动态规划:通过分解大问题,不断的将大问题变成小问题,最终整合所有解,得出最优解(和 ...