移动端REM布局方案
引用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
首先,目前视觉稿大小分为640,750以及,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布局方案的更多相关文章
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
- 移动端rem布局实践
一.rem 适配基本概念: 对于移动端的开发,rem 适配必不可少,我们可以用多种方式实现, 根据 html 的 fontSize 属性值为基准,其它所有的 rem 值,根据这个基准计算.我们根据 ...
- 第132天:移动web端-rem布局(进阶)
rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...
- rem布局方案
移动端适配,老生常谈的问题,这次再谈一次. 闲话少说,直奔正题. 一些像素概念 物理像素:即实际的每一个物理像素,也就是移动设备上每一个物理显示单元(点) 设备逻辑像素(css中的px):可以理解为一 ...
- 一看就懂得移动端rem布局、rem如何换算
这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...
随机推荐
- jQuery中get与eq的区别
get与eq的区别 .eq() 减少匹配元素的集合,根据index索引值,精确指定索引对象. .get() 通过检索匹配jQuery对象得到对应的DOM元素. 同样是返回元素,那么eq与get有什么区 ...
- java request判断微信客户端访问
微信客户端访问时候user-agent信息如下: Mozilla/5.0 (Linux; Android 5.0.1; M040 Build/LRX22C) AppleWebKit/537.36 (K ...
- uva 10986 - Sending email(最短路Dijkstra)
题目连接:10986 - Sending email 题目大意:给出n,m,s,t,n表示有n个点,m表示有m条边,然后给出m行数据表示m条边,每条边的数据有连接两点的序号以及该边的权值,问说从点s到 ...
- SECURITY_ATTRIBUTES 设置低权限
Windows 从 Vista 開始又一次改动了其系统的权限管理机制,于是如今就会碰到一些 xp 能过而 win7 不能过的代码.比方 Service 程序和一般应用程序用共享内存的方式来通讯,Cre ...
- android开发入门经验 ADT Bundle环境搭建
现在有许多做开发的转做移动端开发,做J2EE的转做Android开发,我也把自己的一些入门经验与大家分享一下,希望能给你带来帮助. 工具/原料 JDK,ADT,JAVA 方法/步骤 开发工具的准备 ...
- java23 XML
XML:可扩展标记语言. xml可以当成一个小型的数据库, html / \ html5 xhtml(格式比较严格) | xml xml解析方式有2种: -SAX,SAX是基于事件流的解析,事件流解析 ...
- Cocos2d-x实现粒子效果的三种方式
在Cocos2d-x中,实现粒子效果可以有三种方法. Normal 0 10 pt 0 2 false false false EN-US ZH-CN X-NONE $([{£¥·'"〈&l ...
- 关于AFNetworking访问网络超时的设置
前言:有的猿会发现在设置AFNetworking访问网络超时时,直接用self.manager.requestSerializer.timeoutInterval =10.f不起作用. 解决办法:经过 ...
- 玩转Android之二维码生成与识别
二维码,我们也称作QRCode,QR表示quick response即快速响应,在很多App中我们都能见到二维码的身影,最常见的莫过于微信了.那么今天我们就来看看怎么样在我们自己的App中集成二维码的 ...
- Android源码解析--Quick Search in Settings
欢迎大家加入群里交流:429664282 基于:android-6.0.1_r17 f4b8ad6 Android Settings中存在一个SearchIndexablesProvider,它提供了 ...