移动端自适应之媒体查询，em，rem

1.响应式页面的实现（媒体查询和bootstrap的栅格布局）

媒体查询针对不同的屏幕尺寸设置不同的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">
    <!--忽略页面中数字为电话号码，邮箱格式为邮箱-->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <title>rem</title>
    <style type="text/css">
        @media screen and (max-width:300px){//屏幕尺寸小于300px
            body{
                background-color:red;
            }
        }
        @media screen and (min-width:300px) and (max-width:600px){
            body{
                background-color:green;
            }
        }
        @media screen and (min-width:600px){//屏幕尺寸大于600px
            body{
                background-color:blue;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>

2.页面使用相对字体

》em：相对值，继承父元素字体大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">
    <!--忽略页面中数字为电话号码，邮箱格式为邮箱-->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <title>rem</title>
    <style type="text/css">
        body{
            font-size:20px;
        }
        .one{
            font-size:1.5em; /*30px 1.5em*20px=30px;*/
        }
        .two{
            font-size:0.5em; /*15px 0.5em*30px=15px*/
        }
        .three{
            font-size:2em; /*30px 2em*15px=30px*/
        }
    </style>
</head>
<body>
    <div class="one">
        <span>第一层em</span>
        <div class="two">
            <span>第二层em</span>
            <div class="three">
                <span>第三层em</span>
            </div>
        </div>
    </div>
</body>
</html>

》rem：相对值，相对于根元素HTML

html的fontsize = 屏幕宽度/设计稿宽度*100(1rem=100px)

var html = document.getElementsByTagName('html')[0];//获取html元素
var w = document.documentElement.clientWidth || document.body.clientWidth;//屏幕宽度（兼容处理）
html.style.fontSize = w *100/640 + "px";//640为设计稿宽度

3.百分比布局

移动端自适应之媒体查询，em，rem

猜你喜欢