一稿设计多端适配优雅的解决方案 - 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= ...
随机推荐
- eclipse中查看某个方法(函数)被谁调用
用了好久一直不知道eclipse中怎样实现vs中查找全部引用的功能,今天最终发现了哈哈 选中要查找的方法名,右键->References->Workspace 能够定位到详细的调用位置,快 ...
- jquery导航,按钮等特效 - apycom
http://apycom.com/
- jQuery MiniUI自定义单元格
监听处理"drawcell"事件 使用"drawcell"事件,可以自定义单元格内容.样式.行样式等. grid.on("drawcell" ...
- 小程序 wx.request ajax示例
简单示例 https://developers.weixin.qq.com/miniprogram/dev/api/network-request.html wx.request({ method: ...
- 修改host简化远程访问
问题描述: 使用本机登陆服务器时,需要经常输入IP地址,在局域网下和非局域网下输入的IP又不一样,十分麻烦,如果可以给IP命名一个简单的名字,岂不是很方便? 解决方法: 修改host文件: vim / ...
- setTimeout 的用法
只有第二种和第三种是正确的用法. setTimeout(函数名, 延迟) setTimeout(show(), 1000); show() 是函数运行,这种传递方式真正传进去的是 show 函数的返回 ...
- atitit.判断时间重叠方法总结 java c++ c#.net js php
atitit.判断时间重叠方法总结 java c++ c#.net js php 1. 判断时间重叠具体流程思路 1 2. 重叠算法 实际上就是日期集合跟个时间集合的的交集(乘法算法) 1 3. 代 ...
- Qt 插件综合编程-基于插件的OpenStreetMap瓦片查看器client(1)-墨卡托投影与坐标控制
(相关的代码能够从https://github.com/goldenhawking/mercator.qtviewer.git直接克隆) 我们如今是准备做一个C/S架构的地图显示控件.就必定牵扯到坐标 ...
- Nokia Imaging SDK 的高级使用—实时滤镜拍照
有关 Nokia Imaging SDK 的初级使用,可以参考:Nokia Imaging SDK滤镜使用入门 本文的主题: 1.如何 PhotoCaptureDevice 类使用,以及如何在 Med ...
- CentOS 6.2修改主机名
写在前面的话:因为服务器要统一主机名,但是在安装的时候忘记设置了,所以需要修改主机名 需要修改两处:一处是/etc/sysconfig/network,另一处是/etc/hosts,只修改任一处会 ...