移动端布局方法rem

REM

REM这个单位,会根据html的font-size大小进行转换。

html{font-size:100px;}

p{padding-top:.5rem;}

.5rem = 50px / 100

转换后p的padding-top就是50px了。只要我们进行适当的计算,当前屏幕的宽度,html的font-size是多少px就OK了。

如何计算当前html的font-size值

比如,我们拿到的设计稿是750px,那就设置成当屏幕宽度是750的时候,html的font-size就是100px(当然这个100px你可以随意设置的,我设置成100px只是方便我计算),然后就根据当前屏幕的宽度 / 750 * 100,就得到了当前屏幕宽度的font-size值。

//当前屏幕宽度 / 750 = 当前屏幕宽度的font-size / 100

//代码如下

(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 = 100 * (clientWidth / 750) + ‘px‘;

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener(‘DOMContentLoaded‘, recalc, false);

})(document, window);

上面这段代码,是直接根据屏幕宽度进行计算font-size的。而淘宝移动端REM方案,还根据你的dpr去计算,而且会进行整体的缩放。淘宝的这种方案,比上面的代码会好很多。

第一种方案

第二种方案

大家注意边框的大小。第二张图的边框是比第一张图的小的,两个都是border:solid 1px。其他的边距都是一样。淘宝的方案,解决了另一个问题:边框1px的问题。

大家可以打开以下链接,看看具体的效果:

淘宝移动端REM

这个很简单,只需要加载js就好了

! function() {
var a = "@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:‘‘}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",
b = document.createElement("style");
if (document.getElementsByTagName("head")[0].appendChild(b), b.styleSheet) b.styleSheet.disabled || (b.styleSheet.cssText = a);
else try {
b.innerHTML = a
} catch (c) {
b.innerText = a
}
}();
! function(a, b) {
function c() {
var b = f.getBoundingClientRect().width;
b / i > 540 && (b = 540 * i);
var c = b / 10;
f.style.fontSize = c + "px", k.rem = a.rem = c
}
var d, e = a.document,
f = e.documentElement,
g = e.querySelector(‘meta[name="viewport"]‘),
h = e.querySelector(‘meta[name="flexible"]‘),
i = 0,
j = 0,
k = b.flexible || (b.flexible = {});
if (g) {
var l = g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
l && (j = parseFloat(l[1]), i = parseInt(1 / j))
} else if (h) {
var m = h.getAttribute("content");
if (m) {
var n = m.match(/initial\-dpr=([\d\.]+)/),
o = m.match(/maximum\-dpr=([\d\.]+)/);
n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((1 / i).toFixed(2)))
}
}
if (!i && !j) {
var p = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi)),
q = a.devicePixelRatio;
i = p ? q >= 3 && (!i || i >= 3) ? 3 : q >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i
}
if (f.setAttribute("data-dpr", i), !g)
if (g = e.createElement("meta"), g.setAttribute("name", "viewport"), g.setAttribute("content", "initial-scale=" + j + ", maximum-scale=" + j + ", minimum-scale=" + j + ", user-scalable=no"), f.firstElementChild) f.firstElementChild.appendChild(g);
else {
var r = e.createElement("div");
r.appendChild(g), e.write(r.innerHTML)
}
a.addEventListener("resize", function() {
clearTimeout(d), d = setTimeout(c, 300)
}, !1), a.addEventListener("pageshow", function(a) {
a.persisted && (clearTimeout(d), d = setTimeout(c, 300))
}, !1), "complete" === e.readyState ? e.body.style.fontSize = 12 * i + "px" : e.addEventListener("DOMContentLoaded", function() {
e.body.style.fontSize = 12 * i + "px"
}, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function(a) {
var b = parseFloat(a) * this.rem;
return "string" == typeof a && a.match(/rem$/) && (b += "px"), b
}, k.px2rem = function(a) {
var b = parseFloat(a) / this.rem;
return "string" == typeof a && a.match(/px$/) && (b += "rem"), b
}
}(window, window.lib || (window.lib = {}));

然后在css中,将px转为rem就好了。如果用scss的,写个函数就好了。

@function s($px) {

<a href="http://www.jobbole.com/members/wx1409399284">@return</a> ($px / 75) * 1rem;

}

p{

font-size:s(40);padding-left: s(52);

}

比如p的font-size在750的设计稿是40px,然后s(40)就OK了。

原文地址:http://web.jobbole.com/91853/

时间: 2024-09-30 04:51:32

移动端布局方法rem的相关文章

移动端布局方案 网易

移动端布局: rem方案:页面中的任何元素都采用rem布局,包括字体. 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 7 <me

一看就懂得移动端rem布局、rem如何换算

这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有欠缺的地方,大神们可以指出错误或者改进. function intiSize(){ //获取当前浏览器窗口宽度(这里的实质就是body宽度) var win_w=document.body.offsetWidth; //定义变量 var fontSize; if(win_w>640){ fontSi

细说移动端 经典的REM布局 与 新秀VW布局

和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局 实现单边边框1px 实现多边边框1px 实现边框圆角 实现容器固定纵横比 5. REM + VW布局 6. 对比选择 方案选择 食用方式 一.前言 说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等等. 而另一方面,还有一些 布局概念: 1. 静态布局 直

移动端布局,字体使用rem不生效问题

本文参考连接:https://blog.csdn.net/qq_35484341/article/details/78248371 移动端布局是最让我感到头疼的一件事,一直都是逃避的心态,不想面对,但没办法,公司前端就我一个人,所有的问题迟早都要自己解决,所以不得不开始摸索,最快的办法就是看前辈们都是怎么解决的,但是有些办法不一定适合自己,要挨个试,才知道哪个方法好用,这次我就来记录一下移动端布局rem不生效的问题. 众所周知,rem是相对于html元素的font-size大小而言的,而em是相

移动端布局最佳实践(viewport+rem)

通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别),我们现在来总结一下如何实现一个最佳方案. 之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配,如下图 但是这个可能不会太精准,比如我的设备布局viewport可能是370px,这样只能使用320这一版本.而事实上,他们的viewport并不相同,所以他们的布局也得不一样.也就是说我们如果用css媒体查询只能说是可以用,但不是最佳实践.其实通过看某些牛逼的移动端网站,可以看到他们的共同点,他们都是使用

移动端布局rem em

1.概念 em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初始字体大小 优缺点:em就是为字体和行高而生的,有些时候子元素字体就应该相对于父元素,元素行高就应该相对于字体大小:而rem的有点在于统一的参考系 2.Rem布局原理 rem布局的本质是等比缩放,一般是基于宽度 3.比Rem更好的方案 vw -- 视口宽度的 1/100:vh -- 视口高度的 1/

rem与移动端布局

移动端布局痛点在:兼容各个分辨率的移动设备,同样是手机,iPhone4-iPhoneX分辨率范围就已经很广:如果使用px进行布局,显然会出现问题: 常见的像素单位px,em,rem中,em是相对于父元素font-size的单位,个人认为在使用中,em会比较混乱:rem相对的是根元素.HTML,便于根据屏幕分辨率进行布局: 目前移动端布局采用的方式:  “横向百分比 + 纵向rem”,同时使用flex布局,媒体查询: https://www.cnblogs.com/ysshuai/p/669433

vw结合rem实现移动端布局

继上一篇<媒体查询结合rem实现移动端布局>的改进! 还是以昨天写的页面为例 上一回说到了媒体查询结合rem做移动端布局,步骤如下 首先设置媒体查询,确定html中font-size值的变化 @media all and (max-width:320px){ html{font-size:12px;} } @media all and (min-width:321px) and (max-width:375px){ html{font-size:14px;} } @media all and

移动端布局之路-----rem布局

rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px. /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size: 2rem; } rem的优势:父元素文字大