移动端适配

最新推荐文章于 2022-11-03 20:18:04 发布

维克多噗噗

最新推荐文章于 2022-11-03 20:18:04 发布

阅读量427

点赞数

分类专栏：移动端适配

移动端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

适配

2 篇文章 0 订阅

订阅专栏

百分比布局,flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>百分比布局,flex布局</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
        #banner {width: 100%; height: 100px; border: 5px solid #fff; background: #f60; box-sizing: border-box; border-radius: 10px;}
        #tag {display: flex; flex-direction: row; justify-content: flex-start; width: 100%; height: 100px;}
        #tag div{width: 20%; height: 100px; border: 5px solid #fff; background: #fafafa; box-sizing: border-box; border-radius: 10px;}
        #advertisement {display: flex; flex-direction: row; justify-content: space-around; width: 100%; height: 100px;}
        #advertisement div{width: 30%; height: 100px; background: lightgreen; box-sizing: border-box; border-radius: 10px;}
        #bag {display: flex; flex-direction: row; justify-content: flex-start; width: 100%; height: 100px;}
        #bag .bag {height: 200px; border: 5px solid #fff; box-sizing: border-box; border-radius: 10px;}
        #bag .bag div { border: 5px solid #fff; box-sizing: border-box; border-radius: 10px;}
        #bag .column {display: flex; flex-direction: column; justify-content: flex-start; flex-grow: 2; background: lightblue;}
        #bag .column>div {width: 100%; height: 100px; background: #f60;}
        #bag .row {display: flex; flex-flow: row wrap; justify-content: space-between;flex-grow: 3; background: lightgreen; }
        #bag .row>div{width: 30%; height: 95px; background: #000; box-sizing: border-box;}
    </style>
</head>
<body>
    <div id="banner"></div>
    <div id="tag">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="advertisement">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="bag">
        <div class="column bag">
            <div></div>
            <div></div>
        </div>
        <div class="bag row">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <script type="text/javascript">

    </script>
</body>
</html>

固定宽度,不同设备改变缩放比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->
    <script>
    /*
            添加meta 缩放比例
     */
        var meta = document.createElement("meta"),
            screenW = window.screen.width,
            fixedW = 640,
            scale = screenW / fixedW,  //缩放比例
            headDom = document.getElementsByTagName('head')[0];
        meta.setAttribute('name','viewport');
        meta.setAttribute('content','width='+fixedW+', user-scalable=no, initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale+'');
        headDom.insertBefore(meta,headDom.children[0]);
    </script>
    <title>固定宽度,不同设备改变缩放比例</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
        #box {width: 400px; height: 720px; background: url('1.png');}
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">

    </script>
</body>
</html>

rem适配

a) 根据屏幕的分辨率动态设置html的文字大小，达到等比缩放的功能
b)保证html最终算出来的字体大小，不能小于12px
c) 在不同的移动端显示不同的元素比例效果
d) html的font-size:20px 1rem = 20px
e) 把设计图的宽度分成多少分之一，根据实际情况

通过koala 计算rem 根据设计图的宽度 缩放比例 10~16

css/index.less  自动生成index.css

@rem:77rem;
* {margin: 0; padding: 0;}
a {text-decoration: none; color: black;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
#banner {width: 100%; height: 560/@rem;}
#banner a {display: block; width: 100%; height: 100%;}
#banner a img {display: block; width: auto; height: 100%; margin: 0 auto; }
section {
    max-width: 770px;
    margin: 10/@rem auto;
}
section ul {
    position: relative;
    display: -webkit-flex;
    display: flex;

}
.rowLine:before {
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #ddd;
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    content: '';
}
section ul:after {
    position: absolute;
    left:0;
    bottom: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #ddd;
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    content: '';
}
section ul li{
    position: relative;
    -webkit-flex: 1;
    flex: 1;
    font-size: 30/@rem;
    text-align: center;
    padding: 20/@rem 0;
}

section ul li:after{
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    transform: scaleX(0.5);
    border-right: 1px solid #f0f0f0;
    -webkit-transform: scaleX(0.5);
    content: '';
}
section ul li a {
    display: block;
}
section ul li a img {
    display: block;
    width: 80/@rem;
    height: 80/@rem;
    margin: 0 auto;
}

index.css

这里写图片描述

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script>
        var html = document.querySelector('html'),
            timer = null;

        // 页面宽度改变  重新获取width
        function changeRem(){
            // meta:vp 存在 直接getBoundingClientRect()获取
            var width = html.getBoundingClientRect().width;
            /*if(width>540){ //限制最大宽度
                width = 540;
                // width2 = window.screen.width;
            }*/
            // 设置 初始字体大小
            html.style.fontSize = width/16 +"px";
        }
        function Time(){
            clearTimeout(timer);
            timer = setTimeout(function(){
                changeRem();
            },200)
        }
        changeRem();
        window.addEventListener('resize',function(){
            Time();
        })
        // 每次加载页面时触发 pageview
        window.addEventListener('pageview',function(e){
            /*
            为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false
             */
            if(e.persisted){
                Time();
            }
        })

    </script>
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <title>rem适配</title>
</head>
<body>
    <div id="banner">
        <a href=""><img src="img/banner.jpg" alt=""></a>
    </div>
    <section>
        <ul class="rowLine">
            <li><a href=""><img src="img/1.png" alt=""><span>京东超市</span></a></li>
            <li><a href=""><img src="img/2.png" alt=""><span>全球购</span></a></li>
            <li><a href=""><img src="img/3.png" alt=""><span>服装城</span></a></li>
            <li><a href=""><img src="img/4.png" alt=""><span>生鲜</span></a></li>
            <li><a href=""><img src="img/5.png" alt=""><span>京东到家</span></a></li>
        </ul>
        <ul>
            <li><a href=""><img src="img/6.png" alt=""><span>京东超市</span></a></li>
            <li><a href=""><img src="img/7.png" alt=""><span>全球购</span></a></li>
            <li><a href=""><img src="img/8.png" alt=""><span>服装城</span></a></li>
            <li><a href=""><img src="img/9.png" alt=""><span>生鲜</span></a></li>
            <li><a href=""><img src="img/10.png" alt=""><span>京东到家</span></a></li>
        </ul>
    </section>
    <script type="text/javascript">
        /*
                                770px    10
            @rem:77rem;  ===> 设计图宽度 / 缩放倍数

            线 多种方法.
                1.伪类
                2.div
                3.
         */
    </script>
</body>
</html>

这里写图片描述

横竖屏

a)Window.orientation 
b)方向 竖屏 0 横屏 90或-90
c)根据横屏幕的切换执行不同的事情
d) 横竖屏事件监听 orientationchange

这里写图片描述

笔记

一、移动端适配
    1、为什么要做适配
        a)为了适应各种移动端设备，完美呈现应有的布局效果  
        b)各个移动端设备，分辨率大小不一致，网页想铺满整个屏幕，并在各种分辨下等比缩放
    2、适配方案
        a)固定高度，宽度百分比适配-布局非常均匀 适合百分比布局   
        b)固定宽度，改变缩放比例适配-什么情况都可以
        c)Rem适配
        d)像素比适配
    3、单位
        a)em根据元素自身的字体大小计算 元素自身 16px 1em=16px
        b)Rem R -> root 根节点( html ) 根据html的字体大小计算其他元素尺寸
    4、固定高度，宽度百分比适配
        a)根据设置的大小去设置高度，单位可以用px 百分比 auto 
        b)常用Flex布局
        c)百分比宽度
    5、固定宽度，改变缩放比例适配
        a)设计图的宽度就是网页显示的宽度
        b)改变视口的缩放比例
        c)页面宽度固定死