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插件。

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. 附008.Kubernetes TLS证书介绍及创建

    一 Kubernetes证书 1.1 TLS Kubernetes系统的各个组件需要使用TLS证书对其通信加密以及授权认证,建议在部署之前先生成相关的TLS证书. 1.2 CA证书创建方式 kuber ...

  2. 【设计模式】结构型03外观模式(Facade Pattern)

    [设计模式]结构型02装饰模式(Decorator Pattern) 意图:为子系统中的一组接口提供一个一致的界面,外观模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 主要解决:降低访问 ...

  3. css之rem布局

    rem介绍和原理网上都是,这里不具体介绍 以iphone6设计稿 let htmlWidth = document.documentElement.clientWidth || document.bo ...

  4. Akka-CQRS(14)- Http标准安全解决方案:OAuth2-资源使用授权

    上一篇讨论了SSL/TLS安全连接,主要是一套在通信层面的数据加密解决方案.但我们更需要一套方案来验证客户端.要把不能通过验证的网络请求过滤掉. OAuth2是一套行业标准的网络资源使用授权协议,也就 ...

  5. H5离线缓存基础系列

    1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2.离线缓存的优势 在没有网络 ...

  6. Java 中无返回值的方法在使用时应该注意的问题

    Java 中的方法是形态多样的.无返回值的方法在使用时应该规避哪些问题呢? 一.不可以打印调用或是赋值调用,只能是单独调用(非常重要): 二.返回值没有,不代表参数就没有: 三.不能return一个具 ...

  7. 【无线安全实践入门】网络扫描和ARP欺骗

    文中可能存在错误操作或错误理解,望大家不吝指正. 同时也希望可以帮助到想要学习接触此方面.或兴趣使然的你,让你有个大概的印象. !阅前须知! 本文是基于我几年前的一本笔记本,上面记录了我学习网络基础时 ...

  8. Nginx代理和负载均衡实验

    一.构建两个tomcat容器并启动 [root@localhost bin]# ps -ef|grep tomcat root : pts/ :: /usr/bin/java -Djava.util. ...

  9. JavaScript-浏览器的三种弹窗方式

    //BOM 弹窗 //同步 阻断 alert("alert弹窗"); //返回布尔值 (是/否) var bcf = confirm("confirm弹窗"); ...

  10. Atom常用插件、快键键、使用技巧

    atom 中间有一条白色的虚线,怎么去掉? Settings/Packages/wrap-guide disable 自动换行 File-Settings-Editor-Soft Wrap(打勾即可) ...