手机端原来的时候，在项目中使用js判断出html的字体，然后根据rem设置字体，但是js本着少用的原则，考虑用vm，vh等（顺带说一句，vm vh是网页可视区域宽度 高度 即浏览器宽度减去约16px）

以750px的收集设计稿，采用36px的基础单位 html{ font-size: calc(36 * (100vw) / 750);}rem就可以使用了

手机端布局rem 与vm的使用的更多相关文章

  1. 手机端布局 - rem计算

    功能说明:以一个640px的宽度为基准,最小不低于320px,当大于640px时,让其在页面中居中. 如果正处于640 - 320之中的,都按照js进行等比例的缩放. 这里我们规定1rem = 100 ...

  2. 手机端布局，rem布局动态获取根字体大小

    手机端布局,rem布局动态获取根字体大小. 以下代码: //rem布局动态获取根字体大小 function remDynamicLayout(){ var $windowWidth = $(windo ...

  3. 手机端页面rem自适应脚本

    什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...

  4. 手机端使用rem适配

    最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...

  5. 适配手机端之 rem

    (function() { var psdWidth = 1080, maxRem = 100, ch = document.documentElement.clientHeight || docum ...

  6. flex 实例 豆瓣手机端布局实现

    0.最终成品

  7. 手机端使用rem的适配

    <html> <body> <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d312 ...

  8. 手机端适配rem代码片段

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. rem自适应手机端布局

    通过js根据屏幕设备尺寸的大小,改变根元素的值: <script> var html = document.querySelector("html"); var rem ...

随机推荐

  1. input(file)样式修改及上传文件名显示

    实现思路: a标签包裹input元素 设置a标签为上传按钮的样式,相对定位 设置input为透明,绝对定位,覆盖到a上面 效果:看到的按钮是a的样式,点击时实际是点击input元素.样式和功能都具备 ...

  2. BZOJ1562——[NOI2009]变换序列

    1.题意:题意有些难理解 2.分析:我们发现如果要求判断是否合法的话就so easy了,二分图匹配即可,但是我们发现要求输出字典序最小的,那么我们在匈牙利的时候就倒着枚举,另外邻接表中的边一定要排好序 ...

  3. python的一道面试题 __call__ 的使用.

    class Person: def __init__(self): self.age = 1 def __call__(self, *args, **kwargs): print 'age', sel ...

  4. springMVC学习之接受JSON参数

    今天在springmvc使用rest模式异步提交,后台接受json字符.发现好多问题,感觉和spring3.0使用习惯上多少有点区别.因此把4.0的异步提交和方式记录下来. 前台页面代码如下: < ...

  5. Word 2010 发布博文测试

    新建"博客文章" 点击"文件-> 新建 -> 博客文章 -> 创建": 新窗口的编辑区和不同模式的word有所不同,如果你还没有设置博客账号( ...

  6. upload&&download

    package am.demo;  import java.io.File;  import java.io.IOException;  import java.util.Iterator;  imp ...

  7. eclipse安装genymotion插件

    1.打开eclipse,在界面上点击"Help"按钮,在弹出来的下拉菜单中选择"Install New Software..."选项.系统弹出"Ins ...

  8. Python~删除空格，插入换行符号

    f.write(rf.replace(' ','')) f.write(rf.replace('1041','\n1041')) 不能连续起作用? # -*- coding: UTF-8 -*- im ...

  9. .NET 程序集与命名空间

    程序集 程序集(assembly)是一个或多个托管模块,以及一些资源文件的逻辑组合. 组成部分 Windows文件首部 CLR文件首部 程序集清单 类型元数据 MSIL(CIL)代码 嵌入资源集 作用 ...

  10. SpringBoot实战配置

    http://blog.csdn.net/sun_t89/article/details/51944252 http://www.cnblogs.com/kreo/p/4423362.html