引用http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html的方案

下载地址https://github.com/hupan508/lib-flexible

注意点。

  1、如果html设置过 meta  ,js将使用meta 标签的缩放。

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta content="telephone=no" name="format-detection" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="telephone=no,email=no" name="format-detection" />

    如果加入meta字体写一种px就可以

    关于媒体查询在不同设备下使用图片请查看

    http://www.uigreat.com/api/client_manager/index.php?aid=239&module=content&wenzhang

    常见媒体查询

    https://segmentfault.com/a/1190000002711737

  2、cssrem

    使用cssrem工具,换算px--rem

    修改换算比例

    参数配置文件:Sublime Text -> Preferences -> Package Settings -> cssrem

  •   px_to_rem - px转rem的单位比例,默认为40。
  • max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。
  • available_file_types - 启用此插件的文件类型。默认为:[".css", ".less", ".sass"]。

  把视觉稿中的px转换成rem

    首先,目前视觉稿大小分为640750以及,1125这三种。

    当前方案会把这3类视觉稿分成100份来看待(为了以后兼容vh,vw单位)。每一份被称为一个单位a。同时,1rem单位认定为10a。拿750的视觉稿举例:

    1a = 7.5px
    1rem = 75px

    因此,对于视觉稿上的元素的尺寸换算,只需要原始px值除以rem基准px值即可。例如240px * 120px的元素,最后转换为3.2rem * 1.6rem。

    3、

移动端REM布局方案的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. 移动端rem布局实践

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

  7. 第132天:移动web端-rem布局(进阶)

    rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...

  8. rem布局方案

    移动端适配,老生常谈的问题,这次再谈一次. 闲话少说,直奔正题. 一些像素概念 物理像素:即实际的每一个物理像素,也就是移动设备上每一个物理显示单元(点) 设备逻辑像素(css中的px):可以理解为一 ...

  9. 一看就懂得移动端rem布局、rem如何换算

    这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...

随机推荐

  1. Java - 错误: &quot;java.lang.ArrayIndexOutOfBoundsException: length=1; index=1&quot;

    错误: "java.lang.ArrayIndexOutOfBoundsException: length=1; index=1" 本文地址: http://blog.csdn.n ...

  2. oracle调优 浅析关联设计

    浅析关联设计 [范式] 比較理想的情况下,数据库中的不论什么一个表都会相应到现实生活中的一个对象,如球员是一个对象,球队是一个对象,赛程是一个对象,比赛结果又是一个对象等等,则就是范式. [关联设计] ...

  3. SecureCRT恢复默认字体

    1\要想永久的改变的就跟我来吧,选项--全局选项--常规--默认会话--编辑默认设置--外观--当前颜色方案--选择自己喜欢的方案就行啦,然后选择保存就OK啦方案二: 自从装了Win7之后,觉得sec ...

  4. cglib源码分析(二):Class name 生成策略

    一.如何获取动态生成的class 字节码 结合生成的class文件是一个学习cglib的比较好的方法.在cglib中,生成的class文件默认只存储在内存中,我们可以在代码中加入下面语句来获取clas ...

  5. Docker container network configuration

    http://xmodulo.com/networking-between-docker-containers.html How to set up networking between Docker ...

  6. openoffice转换过程中遇到繁体字文档转换失败的问题

    今天发现上线的文档转换功能中存在一个文档转换不成功,查看后台日志标志文档无法加载成功,提示日志如下: INFO: connected Jul 08, 2015 2:50:33 PM com.artof ...

  7. 简明网络I/O模型---同步异步阻塞非阻塞之惑

    转自:http://www.jianshu.com/p/55eb83d60ab1 网络I/O模型 人多了,就会有问题.web刚出现的时候,光顾的人很少.近年来网络应用规模逐渐扩大,应用的架构也需要随之 ...

  8. 爬虫神器XPath,程序员带你免费获取周星驰等明星热门电影

    本教程由"做全栈攻城狮"原创首发,本人大学生一枚平时还需要上课,但尽量每日更新文章教程.一方面把我所习得的知识分享出来,希望能对初学者有所帮助.另一方面总结自己所学,以备以后查看. ...

  9. Jquery关闭离开页面时提醒

    [导读] 离开页面提示多般是放到了发新闻或写日志的页面,我们在百度空间或QQ空间在我们未保存信息时如果离开页面都有提示了,下面我来介绍利用jquery的beforeunload来实现此方法. jque ...

  10. (转)CSS字体大小: em与px、pt、百分比之间的对比

    CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...