创新路
我们一直在努力

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

当然js也不是最终的解决方案,毕竟我们整个页面不可能只有一个div,假如单单用js的话就要写好多代码,明显是不可取的。

这个时候我们用em/rem:

em的定义是相对于上一级的字体大小的倍数。比如说:

<div style="font-size:20px">

    <div style="height:1em;width:1em;background:red"></div>

</div>

你会发现改变外层div的font-size值时,他里面的div也会跟着改变,这个时候我们不禁想到,假如把所有元素写成em的格式放在一个大div里面,那么我只需要用js改变外面大div的font-size值不就可以了?

当然em还有一个不足的地方,那就是它是相对于上一级的字体大小。那当div层数一多起来算起来也麻烦。

于是我们要用rem,rem的定义是相对于html的。我们看一下下面这个例子:

<html style='font-size:100px'>

<div style="height: 1rem;width:1rem;background: red;font-size:100px">

    <div style="height: 0.5rem;width:0.5rem;background: green"></div>

</div>

</html>

同样,我们改变html的font-size值,div就会跟着变化,而且div自己的font-size值和上一层font-size值是不会造成影响的。假如你有用过em来写过自适应,那你对这个应该体会会深些。

至于这个html的font-size是怎么设置,那就是个人喜好了。比如我,我喜欢把屏幕为640px的html设为100px(因为手机页面的psd大多数是640的),具体代码如下:

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

<script type="text/javascript">

var w = window.innerWidth;

document.documentElement.style.fontSize = (w/640)*100+"px";

</script>

<div style="height:1rem;background;font-size:0.5rem;text-align:center">我是自适应的</div>

 

以下是我个人在用的一个模板,放着备忘:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title></title>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

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

    <style type="text/css">

        body {background: #e4e4e4;} /*加点背景更好看*/

        .center {width:100%;max-width: 640px;min-width: 320px;margin:auto;background: white} /*所有元素写在center里面*/

    </style>    

    <script type="text/javascript">

           window.onload = window.onresize = function(){

            var w = window.innerWidth;

                w = (w>640)?640:w;

                w = (w<320)?320:w;

                document.documentElement.style.fontSize = (w/640)*100+"px";

           }

    </script>

</head>

<body>

    <div class="center">

        <div style="font-size: 0.24rem">我是自适应的</div>    <!–0.24rem表示640 PSD下的24px–>

    </div>

</body>

</html>

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

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

评论 抢沙发

评论前必须登录!

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

联系我们百度云主机