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. 直播技术:从性能参数到业务大数据,浅谈直播CDN服务监控

    线上服务的有效监控和数据收集,一直是后端服务离不开的话题.直播作为一种经典的分布式系统,监控以及数据收集更是必不可少的工作.如何对海量的服务集群有效的监控和保活,又如何抓取集群中的碎片数据中来优化服务 ...

  2. Java NIO: Non-blocking Server 非阻塞网络服务器

    本文翻译自 Jakob Jenkov 的 Java NIO: Non-blocking Server ,原文地址:http://tutorials.jenkov.com/java-nio/non-bl ...

  3. 【前端工具】页面加载获取url param

    例如跳转进入一个页面: https://mp.csdn.net/postedit/74766644?name=catalina&flag=1 函数: function getParam(par ...

  4. 你需要知道的c# Timer 的垃圾回收机制。

    通常我们需要定时执行一段任务的时候,我们就需要定时器,这时我们就可以使用c# System.Threading空间中的 Timer定时器;他是个异步定时器,时间到时每次都是在线程池中分配一个线程去执行 ...

  5. Delphi7中Unicode,ANSI,UTF编码问题

    注解: ANSI     'American Standard Code for Information Interchange' 美国信息互换标准代码 ANSI的'Ascii'编码 Unicode ...

  6. 【HDU - 3085】Nightmare Ⅱ(bfs)

    -->Nightmare Ⅱ 原题太复杂,直接简单的讲中文吧 Descriptions: X表示墙 .表示路 M,G表示两个人 Z表示鬼 M要去找G但是有两个鬼(Z)会阻碍他们,每一轮都是M和G ...

  7. spark 源码分析之五 -- Spark内置RPC机制剖析之一创建NettyRpcEnv

    在前面源码剖析介绍中,spark 源码分析之二 -- SparkContext 的初始化过程 中的SparkEnv和 spark 源码分析之四 -- TaskScheduler的创建和启动过程 中的C ...

  8. 如何使用 Docker 安装 Jenkins

    说在前面 本篇内容非常简单,仅讲述了如何快速在 Docker 上部署一个 Jenkins 实例,不涉及其他. 本文实验环境: 操作系统:Centos 7.5 Docker Version:18.09. ...

  9. 在Winform开发框架中使用DevExpress的TreeList和TreeListLookupEdit控件

    DevExpress提供的树形列表控件TreeList和树形下拉列表控件TreeListLookupEdit都是非常强大的一个控件,它和我们传统Winform的TreeView控件使用上有所不同,我一 ...

  10. python数据库-MySQL数据库高级查询操作(51)

    一.什么是关系? 1.分析:有这么一组数据关于学生的数据 学号.姓名.年龄.住址.成绩.学科.学科(语文.数学.英语) 我们应该怎么去设计储存这些数据呢? 2.先考虑第一范式:列不可在拆分原则 这里面 ...