单位rem 触屏适配总结
总结过的:定宽320 缩放适配手机屏幕
参考文章:web app变革之rem
先了解一下rem
css3 中引入了新的长度单位,rem。 官方定义 font size of the root element rem:rem和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能。
兼容性:IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持。(IE6-8不支持 不过考虑是移动端web app )
设置rem的小练习
html的font-size设置为20px
html{font-size: 20px;}
button{width: 5rem;height: 2rem;background-color: orange;color: #fff;font-size: 1.2rem;border:0;}
html的font-size设置为40px
从这个小练习里就可以知道rem单位元素的大小是根据html font-size变化的,这就是rem做适配的原理。
rem用法很简单,就是根标签html设置文字大小后(不设置的话,大部份浏览器默认为16px),其他标签设置rem都是html大小的倍数。
html{
font-size: 10px; /* 设置html为10px */
}
h1{
font-size: 2rem; /* 10px*2=20px */
}
rem切稿开发
那么我们怎么把设计稿里的单位转换成rem进行开发呢?
首先假设我的页面设计稿给我时候是按照640的标准尺寸给我的前提下,(当然这个尺寸肯定不一定是640,可以是320,或者480,又或是375)来看一组表格。
屏幕根据设计稿的比例转换对应的rem值,比如:
640的设置 = 20*(clientWidth/320)
320的设置 = 10*(clientWidth/320)
设置html font-size的工作我们交给js去实现,所以我的切稿元素都按照 (元素设计稿px/20 = 最终的rem):
/*rem adaptation*/
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 10*(clientWidth / 320) + 'px';
}; recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
// doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
最后再看一下实例效果:
所有元素margin padding font-size width height都是rem
*{margin:0;padding:0;}
.box {padding:10rem;}
.box p{font-size:12rem;line-height: 20rem;}
.box a{display: block;line-height: 40rem;text-align: center;background-color: #2dcb54;color: #fff; font-size:16rem;margin-top:12rem;}
单位rem 触屏适配总结的更多相关文章
- 使用canvas时, 如何用相对单位(rem, rpx)来适配不同机型
使用canvas的api时, 使用的都是绝对数值, 如: 方法传参是坐标位置,不带单位,如ctx.translate(10,10); 那么此时, 我就需要将rem或rpx 转换成 px; 首先, 获取 ...
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- webapp:移动端高清、多屏适配方案(zz)
来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉 ...
- 解惑好文:移动端H5页面高清多屏适配方案 (转)
转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...
- 移动端高清、多屏适配方案 [来源:http://div.io/topic/1092]
Lovesueee 发布于 8 月前 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视 ...
- [转]:移动端H5页面高清多屏适配方案
原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...
- 解惑好文:移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 移动端,多屏幕尺寸高清屏retina屏适配的解决方案
移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页 ...
随机推荐
- 语法速学,返回数组 repeated修饰符
重新编写proto文件 syntax = "proto3"; package services; import "google/api/annotations.proto ...
- JS数组去重整理合集
1.利用splice var arr = [1,2,3,4,5,6,7,8,9,9,8,7,6,5,4,3,2,1]; function repeat(arr){ for(var i = 0;i< ...
- MySQL-linux系统下面的配置文件
一般linux 上都放在 /etc/my.cnf ,window 上安装都是默认可能按照上面的路径还是没找到, window 上 可以登录到mysql中 使用 show variables ...
- (一)IDEA使用,基础配置
Setting分为全局设置和项目设置,全局设置对所有项目都有效,项目设置对当前项目有效. 1.通用的配置最好还是Settings全局设置,省的每个项目都要重新设置: 2. IDEA主题,字体设置: ...
- Acwing P284 金字塔 题解
Analysis 一棵树的每颗子树都对应着这棵树 DFS 序的一个区间.本题的序列虽然不是 DFS 序列,但也有该性质.本题中,我们以区间长度作为阶段, F[ l , r ] 表示序列 s[ l ~ ...
- (3)Go运算符
运算符 Go 语言内置的运算符有: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 算数运算符 运算符 描述 + 相加 - 相减 * 相乘 / 相除 % 求余 注意: ++(自增)和--(自 ...
- QuartzNet 远程管理持久化job 项目, 源码在Github..希望对大家有所帮助
文章目录 为了方便大家去学习 QuartzNet 与 CrystalQuartz 更多信息请点击链接查看 简介 结构图 为了方便大家去学习 QuartzNet 与 CrystalQuartz 更多信息 ...
- windows--zabbix-agent添加主机
1.首先在 C 盘根目录下创建 zabbix 的文件夹 2.将需要的文件拖到该文件夹内(bin/win64) 3.修改 windows 配置文件(zabbix.agent.win.conf)的 ...
- 根据数据文件自定义边界条件timeVaryingUniformFixedValue【转载】
转载自:http://blog.sina.com.cn/s/blog_e256415d0101nf9j.html 在OpenFOAM中,可以创建数据文件,自定义边界条件. 下面的例子读取outletP ...
- 【opencv C++ linux】linux下编译含opencv的C++代码
首先写一个简单的测试代码 #include <opencv2/opencv.hpp> #include <iostream> #include <string> u ...