移动端rem使用
let $html=document.documentElement,
windowW = window.innerWidth,
ratio = windowW / 750
if (windowW > 750) {
$html.style.fontSize='100px'
} else {
$html.style.fontSize=100 * ratio + "px"
} 常规的移动端ui出图都是以iphone6的尺寸来设计,上面设置好根字体后直接就可以拿设计稿上的尺寸用了。
比如:25px就写0.25rem即可,不同尺寸的移动设备就会自动匹配啦!
移动端rem使用的更多相关文章
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 关于移动端rem适配
var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 07. 如何实现移动端rem适配
如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- 移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
- 移动端rem适应布局
移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...
- 移动端rem适配&iOS兼容
移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...
- H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
- 移动端rem布局实践
一.rem 适配基本概念: 对于移动端的开发,rem 适配必不可少,我们可以用多种方式实现, 根据 html 的 fontSize 属性值为基准,其它所有的 rem 值,根据这个基准计算.我们根据 ...
随机推荐
- Linux 下 安装jdk 1.7
Linux 下 安装jdk 1.7 参考百度经验 http://jingyan.baidu.com/album/ce09321b7c111f2bff858fea.html?picindex=6 第一步 ...
- Windows环境下安装scikit-learn
scikit-learn是Python的一个机器学习库,请按照以下步骤进行安装. 1.首先确保你的机器安装了Python并且配置好了环境变量. 2.安装pip 下载地址:https://pypi.py ...
- MySQL checkpoint深入分析
1.日常关注点的问题 2.日志点分析 3.checkpoint:脏页刷盘的检查点 4.模糊检查点发生条件 1.master thread checkpoint 2.flush_lru_list che ...
- Swift学习之方法定义参数有默认值的时候
func testParms(first fir:String, options opt:JSONSerialization.ReadingOptions = []) -> Bool { ret ...
- 使用ExpressionVisitor进行lambadaExpression的动态拼接
现有如下实体 public class User { public int Id { get; set; } public string Name { get; set; } } 根据这个实体创建一个 ...
- VIM的字符编码设置
vim 编码方式的设置和所有的流行文本编辑器一样,Vim 可以很好的编辑各种字符编码的文件,这当然包括UCS-2.UTF-8 等流行的 Unicode 编码方式.然而不幸的是,和很多来自 Linux ...
- Android -- AsyncTask源码解析
1,前段时间换工作的时候,关于AsyncTask源码这个点基本上大一点的公司都会问,所以今天就和大家一起来总结总结.本来早就想写这篇文章的,当时写<Android -- 从源码解析Handle+ ...
- python数据分析入门学习笔记
学习利用python进行数据分析的笔记&下星期二内部交流会要讲的内容,一并分享给大家.博主粗心大意,有什么不对的地方欢迎指正~还有许多尚待完善的地方,待我一边学习一边完善~ 前言:各种和数据分 ...
- DB2的日志理解难点
在DB2中最早的recovery时间点,是由minBuffLsn 和 lowTranLsn 的最小值决定的. minBuffLsn: represents the oldest change to a ...
- Java编程入门(词汇表)
抽象类(abstract class):抽象类不能创建对象,主要用来创建子类.Java中的抽象类使用 abstract 修饰符定义. 抽象数据类型(abstract data type ADT):抽象 ...