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使用的更多相关文章

  1. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  2. 关于移动端rem适配

    var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...

  3. 第130天:移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  4. 07. 如何实现移动端rem适配

    如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. 移动端REM布局模板(阿里高清方案)

    移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...

  6. 移动端Rem布局注意事项

    1.布局的总体结构框架:      2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...

  7. 移动端rem适应布局

    移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...

  8. 移动端rem适配&iOS兼容

    移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...

  9. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  10. 移动端rem布局实践

      一.rem 适配基本概念: 对于移动端的开发,rem 适配必不可少,我们可以用多种方式实现, 根据 html 的 fontSize 属性值为基准,其它所有的 rem 值,根据这个基准计算.我们根据 ...

随机推荐

  1. 如何快速查看github代码库中第一次commit的记录

    发现一个别人推荐的代码库用来学习源码, star星还不少,别人推荐从第一次commit开始阅读,于是试着去找commits的第一次 问题来了,这个代码库commits7855次,点击进入commits ...

  2. 《开发技巧》WEB APP开发调试技巧

    前言 随着html5和nodejs的兴起.web APP越来越火,一套代码可以多平台使用.减少了很大的开发成本.很多APP中也集成了很多的html5页面,增强很高的应用体验.所以移动端页面也事关重要! ...

  3. ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--bootstrap table之用户管理列表

    这张开始bootstrap table,引入项目有两种方法,一种是直接去官网下载 地址:http://bootstrap-table.wenzhixin.net.cn/ 另一种是Nuget引入. 然后 ...

  4. whatwg-fetch源码分析

    fetch 是什么 XMLHttpRequest的最新替代技术 fetch优点 接口更简单.简洁,更加语义化 基于promise,更加好的流程化控制,可以不断then把参数传递,外加 async/aw ...

  5. Html常用标签元素

    Html常用标签元素 Html常用标签元素 常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档 <head></head> ...

  6. python学习之while 和for循环

    while 和for循环 一般格式while <test>: <statment>;else: <statment>; else 部分为可选部分,(控制权离开wih ...

  7. Oracle undo我们需要掌握什么

    <Oracle undo我们需要掌握什么> 引言:undo 是Oracle数据库的重要组件,刚入门的朋友建议要把undo的原理和机制理解明白,尤其是和redo组件的区别和联系.了解undo ...

  8. python编程基础—正则表达式

    正则表达式 正则表达式就是描述字符串排列的一套规则.利用正则表达式可以做很多事情,主要用于字符串的匹配 在实际项目中,我们经常需要找到某一类符合某种格式的信息,此时,我们可以观察这些数据的规律,然后将 ...

  9. Nodejs 复制文件/文件夹

    1.使用fs复制文件 使用fs对象的readFileSync,writeFileSync方法进行读写操作复制 cp.js function copyIt(from, to) { fs.writeFil ...

  10. 去除ios反调试

    在逆向过程中经常会遇到反调试,如下段代码: 0008bd8e movs r1, #0xa ; argument #2 for method imp___symbolstub1__dlopen 0008 ...