rem的基准字体大小的设置
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的基准字体大小的设置的更多相关文章
- sublime中侧边栏字体大小的设置
sublime这个编辑器相当强大,但是它的侧边栏字体实在是太小了,实在是反人类的设计,幸好它给了我们修改的机会 第一步:下载PackageResourceViewer插件,通过PackageContr ...
- Eclipse 改变字体大小,设置背景色
Eclipse背景颜色修改: 操作界面默认颜色为白色.对于我们长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以我经常会改变workspace的背景色,使眼睛舒服一些.设置方法如下: 1.打开win ...
- css颜色,字体大小的设置
设置字体的颜色通过下面的代码: color : #f00; color是颜色的意思,color用来设置一个标签的前景色,表现出来也就是元素文本的颜色. 它的值,一般都是使用#加16进制的颜色值来表示. ...
- jQuery之字体大小的设置
先获取字体大小,进行处理. 再将修改的值保存. slice() 方法可从已有的数组中返回选定的元素.arrayObject.slice(start,end).start 必需.规定从何处开始选 ...
- Android系统移植与调试之------->如何修改Android默认字体大小和设置里面字体大小比例
因为我修改 ro.sf.lcd_density的值,将它从160修改 为120,所以导致整个系统的字体都变得很小.因此需要将整个字体变大,并且在设置-->显示-->字体大小的4个选项的值都 ...
- Android Studio 主题、字体大小的设置
1. Android Studio 主题的设置: 设置Android Studio 自带的主题 设置第三方主题 2. Android Studio 字体的设置 设置左面包名的字体大小 设置右面代码编辑 ...
- rem布局和使用js rem动态改变字体大小,自适应
解决rem文字动态改变字体大小: <script> console.log(window.devicePixelRatio); var iScale = 1; iScale = iScal ...
- Pycharm 字体大小快捷方式设置
1.File->Settings 2.在搜索框搜索increase 点击Increase Font Size(增大字体)右键选择 Add Mouse Shortcut 然后按Ctrl并且鼠标滚轮 ...
- 使用js rem动态改变字体大小,自适应
<html> <head> <meta charset="utf-8"> <script> console.log(window.d ...
随机推荐
- mini木马c源码
#pragma comment(lib, "ws2_32.lib") #pragma comment(linker,"/subsystem:\"windows\ ...
- 39 | 从小作坊到工厂:什么是Selenium Grid?如何搭建Selenium Grid?
- 基于STM32之UART串口通信协议(三)接收
一.前言 1.简介 回顾上一篇UART发送当中,已经讲解了如何实现UART的发送操作了,接下来这一篇将会继续讲解如何实现UART的接收操作. 2.UART简介 嵌入式开发中,UART串口通信协议是我们 ...
- fis3前端工程构建配置入门教程
一.前言 fis3是百度推出的一款前端工程构建工具,类似的还有webpack,gulp等工具:无论大家有没有使用过,从事前端行业应该都略知一二了,所以对于此类工具用干嘛的我这里就不做重复了. 其实对于 ...
- mount -o remount,rw /命令什么意思
1.关于如何改变linux中,对只有Read-only filesystem的文件,如何改为为可写.可读权限? I.可以执行 mount -o remount,rw /II.执行完毕后,会出现以下字样 ...
- 并发编程-concurrent指南-ReadWriteLock
ReadWriteLock也是一个接口,在它里面只定义了两个方法: public interface ReadWriteLock { /** * Returns the lock used for r ...
- DStream转为DF的两种方式(突破map时元组22的限制)
在进行Spark Streaming的开发时,我们常常需要将DStream转为DataFrame来进行进一步的处理, 共有两种方式,方式一: val spark = SparkSession.buil ...
- Oracle数据库---包
--根据员工号或员工姓名获取员工的信息--根据员工号或员工姓名删除员工的信息--创建包规范CREATE OR REPLACE PACKAGE overload_pkgIS FUNCTION get_i ...
- Linux命令学习-tar命令
Linux中,tar命令的全称是tape archive,主要作用是压缩和解压文件. 参数说明: -c 创建新的压缩档案 -x 解压档案 -t 列出压缩档案的内容 -z 使用gzip来解压和压缩,文件 ...
- 谷歌地球 Google Earth v7.3.2.5495 专业版
谷歌地球(Google Earth,GE)是一款谷歌公司开发的虚拟地球软件,它把卫星照片.航空照相和GIS布置在一个地球的三维模型上.谷歌地球于2005年向全球推出,被<PC 世界杂志>评 ...