创新路
我们一直在努力

em/rem写手机页面的一种写法(1)

1、缩放。你可以尝试着加和不加这个代码,方正写自适应我是都会加这一段的。至于喜欢寻根究底的童鞋可以看一下这篇文章,或者自行百度“meta viewport”。

<meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">

2、高度、字体大小。

我相信这才是大多数人觉得写自适应比较麻烦的地方,毕竟宽度可以写成百分比可是高度跑不了,字体大小也一样。

rem/em正是解决这个问题的一种方法。我们先看一下另一种比较笨的方法。

@media screen and (max-width: 320px) {

    div {height:50px}

}

@media screen and (min-width: 320px) and (max-width: 640px) {

    div {height:80px}

}

@media screen and (min-width: 640px) {

    div {height:100px}

}

用上面的css,再随便建一个div,你会发现div的高度会根据页面大小变化。其实语句很简单,光看也能猜出来是什么意思了。这不禁让我们想到,可以再细分一些,写到每一像素,那么高度问题,文字大小问题(只需把height换成font-size)不就迎刃而解了么。不过也绝没有一个程序员会这么做,除非。。呵呵

我们可以用js来做这件事情,先是获取页面宽度,然后再根据页面宽度计算出height的值再赋予div。好像很难?其实不会。

比如div我想它在640px的屏幕上显示是100px的高,并等比例缩放。那么在320px的屏幕上它就应该是50px高。因为640刚好是320的2倍,那么高度与屏幕宽的关系就是:

高度 = (屏幕宽/640)*100px

换成js就是:

var w = window.innerWidth;

var d = document.getElementById('aa');  //这里aa是div的id

d.style.height = (w/640)*100+'px';

未经允许不得转载:天府数据港官方信息博客 » em/rem写手机页面的一种写法(1)

客官点个赞呗! (0)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机