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. kali 源文件 更改和使用 更新日期:2018.04.21

    我的公众号,正在建设中,欢迎关注: 0x01 源文件格式: kali下常用的更新命令有: apt-get install update和apt-get install upgrade,update是下 ...

  2. MyBatis无限级分类实现的两种方法--自关联与map集合

    1.这回先创建数据库吧 下表cid是CategoryId的缩写,cname是CategoryName的缩写,pid是parentId的缩写 无限级分类一般都包含这三个属性,至少也要包含cid和pid才 ...

  3. MYSQL事务之Yii2.0商户提现

    我是一个半路出家的PHP程序员,到目前为止,不算在培训班学习的时间,已经写代码整整两年了.可能由于工作业务的原因,在这两年中我没有用到过MySQL事务.就在昨天有个关于支付宝转账的业务不得不使用MyS ...

  4. 设计模式-抽象工厂模式(AbstractFactory)

    抽象工厂模式是向客户端提供一个接口(FruitFactory),,使得客户端在不必指定产品的具体类型的情况下,能够创建多个产品族(NorthFruit.SouthFruit)的产品对象. 角色和职责: ...

  5. yarn or npm 版本固化如何选择

    前言 作为前端开发者,npm这个包管理工具的重要性显而易见.优点不再表述,但一些缺点是为使用者诟病比较多的:速度慢.版本控制.下面主要讨论下npm的版本固化问题,即lock文件. npm语义化版本管理 ...

  6. BZOJ 2115:Xor(线性基+DFS)

    题目链接 题意 中文题意 思路 因为存在环和重边,边来回走是没有意义的,因此最终的答案应该是一条从1到n的路径权值异或上若干个环的权值,那么难点在于如何选取这些环的权值使得最终的答案更优. 使用到线性 ...

  7. Weblogic 'wls-wsat' XMLDecoder 反序列化_CVE-2017-10271漏洞复现

    Weblogic 'wls-wsat' XMLDecoder 反序列化_CVE-2017-10271漏洞复现 一.漏洞概述  WebLogic的 WLS Security组件对外提供webservic ...

  8. android布局几点随想

    1. 正式布局界面时,先在纸上画出整个布局,并考虑用什么布局比较适合: 2. 布局界面先做出框架,并用不同的背景颜色标记出来,确保大的布局框架式正确的: 3. 接着在每个大的布局框架内布局小的布局: ...

  9. Spring Boot 整合 Shiro实现认证及授权管理

    Spring Boot Shiro 本示例要内容 基于RBAC,授权.认证 加密.解密 统一异常处理 redis session支持 介绍 Apache Shiro 是一个功能强大且易于使用的Java ...

  10. python介绍、安装及相关语法、python运维、编译与解释

    1.python介绍 Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/)是一种广泛使用的解释型.高级编程.通用型编程语言,由吉多.范罗苏姆创造,第一版发布于1991年.可以视 ...