单位rem 触屏适配总结

来源:http://www.cnblogs.com/dtdxrk/p/4644703.html

先了解一下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


1

2

html{font-size: 20px;}

        button{width: 5rem;height: 2rem;color: #fff;font-size: 1.2rem;border:0;}

  

html的font-size设置为40px

从这个小练习里就可以知道rem单位元素的大小是根据html font-size变化的,这就是rem做适配的原理。

rem用法很简单,就是根标签html设置文字大小后(不设置的话,大部份浏览器默认为16px),其他标签设置rem都是html大小的倍数。


1

2

3

4

5

6

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):


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

/*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


1

2

3

4

*{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;color: #fff; font-size:16rem;margin-top:12rem;}

时间: 2024-10-13 12:35:36

单位rem 触屏适配总结的相关文章

移动端页面使用rem来做适配

rem介绍 rem(font size of the root element)是指相对于根元素(即html元素)的字体大小的单位.假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如 1 html{ 2 font-size: 10px; 3 } 4 width: 2rem; /* 2*10 = 20px;*/ 5 margin: 1rem; 6 } 7 img{ 8 width:.6rem; 9 } rem来做适配 以前我们往往这样做页面:viewport width

移动端多屏适配方案

原文:http://www.cocoachina.com/webapp/20150715/12585.html?utm_source=tuicool 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667).

移动端高清、多屏适配方案

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i

移动端H5页面高清多屏适配方案

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

移动端,多屏幕尺寸高清屏retina屏适配的解决方案

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i

解惑好文:移动端H5页面高清多屏适配方案 (转)

转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makegrid.js https://segmentfault.com/a/1190000006839117 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的375×667,就会变成750×1334).

移动端开发高清效果和多屏适配

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的3

【原创】移动端高清、多屏适配方案

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i

移动端 单位 rem

rem是指相对于根元素的字体大小的单位(相对单位) rem和em的区别,em相对于父元素的字体大小的单位.rem相对于根元素html字体大小计算, px是一个绝对的单位. 所以rem可以实现强大的屏幕适配布局 例如: html{ font-size:20px; } .btn{ width:6rem; height:3rem; } //<div class='btn'></btn>那么.btn的宽度为120px;高度为60px; 所以在做移动端适配的时候就要根据不同分辨率设置font