手机端原来的时候，在项目中使用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. linux常用命令-文件搜索命令-locate,which,whereis,grep

    locate 目录或文件名 -i 查找的时候不区分大小写 这个类似everything,速度比find快很多,因为这个命令搜索的是它维护的文件资料库,文件资料库是var/lib/mlocate/mlo ...

  2. python set

    set是一个工厂函数(filter也是工厂函数),是一个可变的集合 frozenset 不可变的集合,与set共性,他也在内部自动去重, >>> num5=frozenset([1, ...

  3. html5 form表单常用标签

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

  4. 动态执行python脚本

    前言 存在许多独立的python脚本,这些脚本可能会增加,也可能会减少,现在需要按照某种顺序调度这些程序.在python的standard library中,有一个模块imp可以实现动态的调用ptho ...

  5. eclipse安装genymotion插件

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

  6. UIPickerView选择器的使用方法

    UIPickerView是选择列表内容的控件 使用方法与UITableView类似 都需要用array传入数据 用Delegate DataSource中的代理方法实现各种显示功能 @interfac ...

  7. 第一个JSP

    还是大一暑假学的Java,知识掌握了第一阶段的Java基础知识, 后面想自己进阶第二阶段,学习JavaWeb,一直拖到现在直接从Java第二阶段写了~~~ 希望指正: 这次主要还是第一个Hello W ...

  8. OpenStack 云计算基础知识

    OpenStack Docs: Currenthttp://docs.openstack.org/ OpenStack云计算快速入门教程 - OpenStack及其构成简介_服务器应用_Linux公社 ...

  9. Pyqt adb 获取Android手机屏幕

    adb的全称为Android Debug Bridge,就是起到调试桥的作用.adb的工作方式比较特殊,采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯,默认情况下adb会da ...

  10. SQL数字转英文函数

    -- 数字转英文 -- ============================================= -- Author: qianjin036a -- Create date:06/1 ...