02-----移动端单位介绍

序言

在页面整体布局中，页面元素的尺寸大小（长度、宽度、内外边距等）和页面字体的大小也是重要的工作之一。一个合理设置，则会让页面看起来层次分明，重点鲜明，赏心悦目。反之，一个不友好的页面尺寸和字体大小设置，则会增加页面的复杂性，增加用户对页面理解的复杂性；甚至在当下访问终端（iPhone、iPad、PC、Android…）层出不穷的今天，适应各式各样的访问终端，将成为手中的一块“烫手的山芋”。所以在近几年，“九宫格”式的“流式布局”再度回归。为了提供页面布局，及其它的可维护性、可扩展性，我们尝试将页面元素的大小，以及字体大小都设置为相对值，不再是孤立的固定像素点。使其能在父元素的尺寸变化的同时，子元素也能随之适应变化。以及结合少量最新CSS3的@media查询，来实现“响应式布局”，bootstrap这类CSS框架大势兴起。

 

然而在CSS中，W3C文档把尺寸单位划为为两类：相对长度单位 和 绝对长度单位

 

然而相对长度单位按照不同的参考元素，又可以分为字体相对单位和视窗相对单位

字体相对单位有：em、ex、ch、rem；

视窗相对单位则包含：vw、vh、vmin、vmax几种

绝对定位则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。

但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。

 

px：绝对（固定）单位

缺点：人和情况下都是固定值，会导致布局在不同尺寸下的设备错位

 

%：相对定位（会有影响发生变化）相对于父级（自身）大小进行定位

缺点：能确定范围的还是比较好计算的，对于不太好确定值得地方不好使用百分比，并且会导致变形，高度一般不好控制

 

em：相对定位（会有影响发生变化）em=当前字体大小

缺点：会根据当前容器字体大小发生变化，假如每个容器字体大小不一致，那么计算会非常麻烦

 

rem

r==root
em=字体大小 font-size
rem 相对单位
只依赖于html字体大小

可以认为它没啥缺点吧！反正我个人还是挺喜欢的

 

动态的修改根元素的font-size：

需要通过js去控制：

/*获得页面宽度后动态修改html上的fontsize
* 320为iphone5设计稿下的页面宽度，如下设置后页面的页面在iphone5等宽屏幕上html
* 的font-size会变为20px，即 1rem = 100px    1px=0.05rem
* 所以设置元素尺寸的时候，如果测量设计稿 15px  则需设置尺寸为 (0.05*15)rem = 0.75rem   
*/


!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            console.log(width)
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

 

将上面的文件引入到当前项目中，

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
        <title>移动端布局</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            .clearfix:after{
                content: '';
                display: block;
                clear: both;
            }
            html{
                width: 100%;
                height: 100%;
                /*font-size: 30px;*/
                overflow: hidden;
            }
            body{
                width: 100%;
                height: 100%;
                overflow: auto;
            }
            .head-box{
                width: 100%;
                height: 4rem;
                background-color: red;
                position: absolute;
                top: 0;
                left: 0;    
            }
            .list{
                margin-top: 4rem;
                font-size: 1.5rem;
            }
            
            .list .item{
                float: left;
                width: 7rem;
                height: 7rem;
                border: 1px solid black;
                margin: 0.25rem;
                
            }
            
            
            
        </style>
    </head>
    <body>
        
        <header class="head-box">
            <div class="head-top"></div>
            <div class="head-bottom"></div>
        </header>
        
        <ul class="list clearfix">
            <li class="item">1111111</li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        
    </body>
    <script src="./js/resize.js"></script>
</html>

 

posted @ 2018-07-23 10:41  王竹笙  阅读(133)  评论(0)  编辑  收藏  举报