一稿设计多端适配优雅的解决方案 - rem
规范目的
为提高前端团队开发效率,输出高质量的前端页面代码,提高UI设计还原度,特编写该规范文档。本文档如有不对或者不合适的地方请及时提出。
JS代码块
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
使用方法
ui设计师设计界面时建议以iphone6的两倍尺寸(750px)为设计标准尺寸,前端开发在开发页面先引用上述代码块,前端开发在选择标注时仍按照标准px来标注,为了计算方便js代码块中乘以100,在css中为实际尺寸只/100(rem)。
如图:标题栏在标注中高度为88px在页面css里实际为88/100=0.88rem
注意事项
- 如果设计稿尺寸为其他则代码块要做相应修改。
- 此适配方法只适合在移动端开发前端web页面。
一稿设计多端适配优雅的解决方案 - rem的更多相关文章
- 移动端适配 后篇(rem+vm)
涉及到的一些名词, 详细解释可参考 移动端适配前篇--移动端适配 rem 名词解释 [英寸Inch]英寸表示屏幕斜对角线的长度 [像素Pixel]像素是图像的基本采样单位,它不是一个确定的物理量,因为 ...
- 移动端适配(手机端rem布局详解)
1. 问题的引出 如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10 ...
- vue-cli 2.x和3.x配置移动端适配px自动转为rem
移动端适配一直都是个大问题,现在也出现了各种各样的解决方案,比如 rem, vw 百分比等,但是比较成熟的切比较容易编写的还是 rem,他是相对于根元素的 font-size 进行等比例计算的. 但是 ...
- 【前端开发】移动端适配方案js,rem单位转换,640设计稿20px=1rem
! function() { var style = document.createElement("STYLE"), docEl = document.documentEleme ...
- 移动端适配(3)——rem适配
rem适配 <meta name="viewport" content="width=device-width,user-scalable=no"/&g ...
- 移动端适配之sprite雪碧图背景定位
移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...
- 解决vue移动端适配问题
1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基 ...
- Web移动端适配总结
移动端适配的相关概念以及几种方案总结 适配相关概念 布局视口(layout viewport):html元素的上一级容器即顶级容器,用于解决页面在手机上显示的问题.大部分移动设备都将这个视口分辨率设置 ...
- 小tips:使用rem+vw实现简单的移动端适配
首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...
随机推荐
- RDS for MySQL 如何使用 Percona Toolkit
Percona Toolkit 包含多种用于 MySQL 数据库管理的工具. 下面介绍常用的 pt-online-schema-change 和 pt-archiver 搭配 RDS MySQL ...
- Linux-软件包管理-yum在线安装rz、sz工具
yum search lrzsz yum方式查询 rpm -q lrzsz rpm方式查询 yum -y install lrzsz 安装 rpm -q lrzsz rpm方式查询 sz下载 rz上传
- 工作总结 @{var sas = String.Format("{0:yyyy-MM-dd}", Model.DemandTime.GetValueOrDefault());}
可空DateTime类型 无法Tostring 或者 格式化时间格式 需要转换 为DateTime Nullable<T>.GetValueOrDefault() 方法 返回对应的 ...
- Android成长之路-手势库的创建
手势库的创建: 使用SDK自带的例子GestureBuilder建立手势库,这个文件夹存在于android\android-sdk-windows \samples\android-10\Gest ...
- 转 Android开发学习笔记:浅谈WebView
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://liangruijun.blog.51cto.com/3061169/647456 ...
- 将相关数据拼成所需JSON数据
参考: http://www.cnblogs.com/shuilangyizu/p/6019561.html 有时候我们需要将一些数据拼装成所需要格式的JSON,可以使用如下方法,本人觉得还是比较方便 ...
- struts2异常处理机制
一.处理一般异常(javaBean异常) struts2进行异常处理首先需要添加exception拦截器,而默认拦截器栈已经加入了这个拦截器,所以不用特意的声明.在Struts 2框架中,采用声明式异 ...
- 06、Windows 10 技术预览
随着 Windows 10 发布的,未来 Windows 平台都是统一开发模型,可以只写一个 Appx 包,就可以同时部署到 Windows/ Windowsw Phone/ Tablet /xbox ...
- 【LeetCode】065-验证数字
写在前面 前面研究OS的经历实在是令人心力憔悴..所以换个新鲜的,把自己的刷题感悟整理一番.刷了有些题了,就先拿最近几天hard题打头阵吧.首先说的是(065)Valid Number这个题,其实一眼 ...
- loadrunner录制成功但脚本内容为空,无任何代码//脚本中包含乱码
使用loadrunner录制脚本,录制过程中也会显示“正在录制…”,并且有(XX个事件).但是脚本录制结束之后,脚本中没有任何内容,没有代码显示. 解决方法: 在脚本录制程序VU generator中 ...