px-rem自适应转换(转)

当前团队开发过程,存在2种度量单位(px、rem)各有说辞
px:各个终端统一大小,简单明了,未尝不可!
rem:大屏幕显示大字体,小屏幕显示小字体,渐进增强视觉感。
业界各种写法都有,不逐一讨论。
团队呼声:使用rem,达到字体渐进增强视觉感。
得出一套简洁的rem计算自适应方法!大喜!

核心换算片段如下
---------------------------------------------
<script>
function Rem() {
var docEl = document.documentElement,
oSize = docEl.clientWidth / 6.4;

if (oSize > 100) {
oSize = 100; // 限制rem值 640 / 6.4 =100
}

docEl.style.fontSize = oSize + ‘px‘;
}
window.addEventListener(‘resize‘, Rem, false);
Rem();
</script>

---------------------------------------------------

A: oSize = docEl.clientWidth/7.5; //设计稿默认750px宽度,这样7.5,如果设计稿是640px宽度,这个7.5就修改6.4

B: if(oSize>85){
oSize = 85; // 限制rem值 640 / 7.5 ≈ 85
}
640是max-width:640px这样的屏幕宽度,7.5是设计搞是750px
如果设计稿是 640px.则 640/6.4这样去
一把移动端页面 在 body处 设置 max-width:640px

如上加入这段代码,下面写单位的时候,直接按照PSD里面的标准大小除以100即可。
如:标注28px.则写 0.28rem即可!
自适应,体验性!beautiful!在各个终端完全自适应大小!伸缩自如!

媒体查询?那么一大段?分批次去写?NO,NO,NO.还得去适配。
工具换算?NO,NO!还得安装插件。

有了此REM()代码片段,再也不用担心产品,UI说这里小,那里大,不信?你试试!

___________(转自:http://www.cnblogs.com/leshao/p/5674710.html)

时间: 2024-10-14 23:38:46

px-rem自适应转换(转)的相关文章

移动端适配方案以及rem和px之间的转换

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

javascript中常见的函数封装 :判断是否是手机,判断是否是微信,获取url地址?后面的具体参数值,毫秒格式化时间,手机端px、rem尺寸转换等

// 判断是否是手机function plat_is_mobile(){ var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match

em,rem,px之间的转换

::>_<::我们在写css样式时,经常会遇到字体大小在不同的浏览器不同的设备上显示不一致的情况,一般有这几种单位可供开发者选择:em,rem,px.下面我就介绍一下这几种单位 一.px:是像素(Pixel)的简写.相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器

css大小单位px em rem的转换和详解

PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核). px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.(引自CSS2.0手册) 任意浏览器的默认

rem自适应布局的回顾总结

使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗?rem的根html font-size设置为多少合适?看看这篇文章,也许能帮到你. 这些问题整理来自之前发表过的文章,细心的读者也可以自己翻翻之前的内容找到答案,本文统一给个回复,如果对你有用,还请点个赞,谢谢! rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发

Rem自适应js---flexible.min.js

网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不用再为各种设备宽度不同而烦恼如何实现自适应的问题. rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.1rem=16px(浏览器html的像素,可以设定这个基准值),假如浏览器的html设为64px,则下面的元素则1rem=64px来运

rem自适应布局(转)

原文链接:http://caibaojian.com/web-app-rem.html rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算. rem的值 目前有两种,一种是根据js来调整html的字号,另一种

移动端网页 rem 自适应布局

(function(doc , win){var DocElement = doc.documentElement;var RsizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';function ResetSize(){var deviceWidth = DocElement.clientWidth;if(!deviceWidth){return false;}DocElement.style.fo

rem自适应布局

rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是如何实现自适应布局的. rem的值 目前有两种,一种是根据js来调整html的字号,另一种则是通过媒体查询来调整字号. 使用js (function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.

关于rem自适应的一点研究

参考地址:http://m.ctrip.com/html5/ https://www.amazon.cn/ rem是相对于html根元素的一个单位.rem是px的16倍,即1rem = 16px;除了IE低版本浏览器不支持它以外,其他都支持,看下图: 现在大部分浏览器IE9+,Firefox.Chrome.Safari.Opera ,如果我们不修改相关的字体配置,都是默认显示font-size是16px即 html { font-size:16px; } 那么如果我们想给一个P标签设置12px的