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. 管理分布式session的四种方式。

    应用服务器的高可用架构设计最为理想的是服务无状态,但实际上业务总会有状态的,以session记录用户信息的例子来讲,未登入时,服务器没有记入用户信息的session访问网站都是以游客方式访问的,账号密 ...

  2. Python笔记【4】_字典学习

    #!/usr/bin/env/python #-*-coding:utf-8-*- #Author:LingChongShi #查看源码Ctrl+左键 ''' dict:字典以“{}”包围,以“键:值 ...

  3. redhat6.0下配置DNS

    最近操作系统要结课,老师要求在redhat上配置各种服务器角色,包括dhcp.ftp.web.dns.前三个都还好,但就dns,被折磨的死去活来的,真让人头大.还好在同学的帮助下最后配置成功,实现了正 ...

  4. Qt之股票组件-股票检索--支持预览框、鼠标、键盘操作

    目录 一.感慨一下 二.效果展示 三.搜索编辑框 1.编辑框 2.预览框 四.相关文章 原文链接:Qt之股票组件-股票检索--支持预览框.鼠标.键盘操作 一.感慨一下 之前做过一款炒股软件,个人觉着是 ...

  5. [Vue 牛刀小试]:第十五章 - 传统开发模式下的 axios 使用入门

    一.前言 在没有接触 React.Angular.Vue 这类 MVVM 的前端框架之前,无法抛弃 Jquery 的重要理由,除了优秀的前端 DOM 元素操作性以外,能够非常便捷的发起 http 请求 ...

  6. 2.秋招复习简单整理之String、StringBuffer、StringBuilder的区别和联系

    String特点: 1.String是不可变对象,一旦赋值创建就不变,这意味着对String的一切修改将产生一个新的字符串,比如String的subString,replace.toUpperCase ...

  7. Java基础之回味finally

    平时大家try…catch…finally语句用的不少,知道finally块一定会在try…catch..执行结束时执行,但是具体是在什么时候执行呢,今天我们一起来看下. public static ...

  8. C程序疑问解答 ——可怕的野指针

    本篇为原创,禁止任何形式的他用! 一.疑问点         指针是C语言一个很强大的功能,同时也是很容易让人犯错的一个功能,用错了指针,轻者只是报个错,重者可能整个系统都崩溃了.下面是大家在编写C程 ...

  9. STM32F0_HAL库驱动描述——HAL驱动程序概述

    HAL库文件结构: HAL驱动文件: 外设驱动API文件和头文件:包含了常见主要的通用API,其中ppp表示外设名称,如adc.usart.gpio.irda等: stm32f0xx_hal_ppp. ...

  10. C# Winform --xml文件

    背景: 在工作中,学习和使用OPC Server/Client系统时,发现开发的设计结构是把设备PLC的TAGLIST写为XML文件,在程序启动的时候载入从而完成自动配置. 从而开始了C# ASP.N ...