saber酱的抱枕

Fly me to the moon

02/26
04:03
学习

移动端使用 vw + rem 自适应布局

使用 rem 布局时,最关键的地方在于动态计算 rem 的值。比如设计稿 640px,我们预设 rem 为 100px。rem 是设计宽度的 15.625%(100 / 640 = 0.15625)。当设备宽度为 320px 的时候,rem 值应该按比例变成 50px。

以前当设备宽度变化时,我们要根据这个比例重新计算 rem 应该是多少,增加了额外的工作量。如果我们可以直接告诉浏览器,我的 rem 就是这个比例(页面宽度的 15.625%),你聪明一点自己算吧!这样不就省事了吗?没错,这就是 vw 单位。

vw 是视图宽度,1vw 相当于 1% 视图宽度(想象把页面宽度分成了 100 份)。所以上面的比例 15.625%,用 vw 就是 15.625vw。当页面宽度变大或者变小,rem 总是页面宽度的 15.625%。

html{
    font-size: 15.625vw;  // 要理解 vw 是个百分比单位
}
// 下面照常使用 rem 做单位

我们这么写就可以了,浏览器会自动计算出来 rem 的值,非常的方便。

如果你的设计稿和预设 rem 不是 640px、100px,那么只需要依据你的比例,修改 vw 值即可。
Read More →

移动端使用 vw + rem 自适应布局

01/3
02:16
学习

iframe自适应高度

iframe平时我们已经不怎么用了,但有些特殊情况还是要用。浏览器默认给iframe的区域都比较小:

宽度好解决,一般由父页面控制iframe的宽度,直接设置样式即可:

<iframe id="iframe" src="url" frameborder="0" style="width: 100%;"></iframe>

但是iframe的高度不会自动撑开,我们可以用JavaScript来解决。
Read More →

iframe自适应高度

01/22
15:31
学习

动态设置rem使页面自适应缩放

更新:两年过去了,现在推荐使用 vw + rem 自适应布局


我们页面布局中,可以通过动态设置rem并使用rem单位来设置宽高,来使得页面元素的尺寸可以随设备宽度而变化,这样就能保持布局的一致性。

使用JavaScript动态设置rem的代码如下:

(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 / 640) + 'px';
	  };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

公式是这样的:

100 * ( 浏览器页面宽度 / 设计稿宽度 )

第一部分:100是什么

这个100其实是我们使用的rem基础值,等于设置html标签的font-size=100px,这样,1rem也就是100px。

当1rem为100px时,页面上所有元素设置宽高大小时都除以100,就得出了该元素的rem值。比如设计稿上300px宽的元素,用rem设置就是width=3rem。

1rem并不是非要设置为100px,我们也可以设置成别的,比如设置1rem=50px,那么300px的元素是6rem。我们一般取1rem=100px是为了方便计算。如果实际项目中计算页面元素的rem值时不是按1rem=100px来算的,则需要修改公式里的100为实际使用的1rem值。

第二部分:浏览器页面宽度 / 设计稿宽度 是什么

这个可以理解为页面在设备上的缩放比例。比如iphone 6 plus的设备宽度是414px,我们的设计稿是640px。

414/640=0.646875,得出我们的页面在iphone 6 plus上应该显示为设计稿大小的0.646875倍。

最后我们把rem的基础值与页面缩放比例相乘,得出实际使用的rem基础值。rem的基础值变了,页面上所有元素的宽高、大小也会随之改变,这样就达到了页面自适应的效果。
Read More →

动态设置rem使页面自适应缩放

08/24
14:35
学习

网页使用固定宽度布局,适应不同宽度的手机屏幕

今天完成了一个手机站专题的排版,然后到手机上测试缩放的时候出了问题,折腾半个上午,摸索出一些心得(后来发现,这就是固定宽度布局嘛)。

1.排版的时候用px排,在css里把body宽度固定,可以定成和设计稿一样,例如360px,640px。其他元素也都用px。

2.使用js动态设置viewport:

var scale=document.documentElement.clientWidth/640;
// var scale=window.screen.width/640;
var metaEl = document.createElement('meta');
document.querySelector("head").appendChild(metaEl);
metaEl.setAttribute('name','viewport');
metaEl.setAttribute('content', 'width=device-width ,initial-scale=' + scale + ',maximum-scale=1.0, minimum-scale=0 ,user-scalable=no');

这里面的640改成自己给body定的的宽度。这个代码的意思就是把initial-scale倍数设置为浏览器device-width/网页固定的宽度,使得页面被缩放到适应屏幕宽度。

ps:本文最近做过更新,第二步动态设置viewport,虽然理论上是正确的,但我还没实践过。我现在尝试用rem布局。

网页使用固定宽度布局,适应不同宽度的手机屏幕