移动端开发基础

其他 2020-06-18 22:23:25 阅读次数: 0

Viewport视口

在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口，分别表示为， visual viewport（可视视口）和layout viewport（布局视口）。

visual viewport 固定大小跟屏幕大小相同，在上面，而layout viewport 可改变大小，在下面。Layout viewport默认大小为980像素，可通过document.documentElement.clientWidth获取。

现代网页需要将layout viewport设置成跟visual viewport等同大小，方便进行网页制作。

Viewport设置

通过<meta>标签进行设置，name属性指定viewport值，content属性进行视口配置。

取值 含义
width 设置layout viewport的宽度特定值，device-width表示设备宽。
height 设置layout viewport 的高度特定值，一般不进行设置。
initial-scale 设置页面初始缩放。
minimun-scale 设置页面最小缩放
maximum-scale 设置页面最大缩放
user-scalable 设置页面能否进行缩放

移动端适配方案

  • 百分比布局，也叫流式布局。代表网站：优酷、百度、天猫、腾讯。
    在这里插入图片描述
  • 等比缩放布局，也叫rem布局。代表网站：网易、爱奇艺、淘宝、美图。
    在这里插入图片描述

流式布局原则

在这里插入图片描述
好处：大屏幕下显示更多的内容。
坏处：宽屏下比例会有一些不协调

案例：仿拉勾网

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拉钩网</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #555555;
        }

        img {
            display: block;
        }

        header {
            height: 45px;
            line-height: 45px;
            color: white;
            font-size: 20px;
            text-align: center;
            background-color: #00b38a;
        }

        .login {
            /* 弹性布局 */
            display: flex;
            /*子元素两端对齐 */
            justify-content: space-between;
            /* 子元素垂直居中 */
            align-items: center;
            height: 43px;
            font-size: 14px;
        }

        .login p {
            margin-left: 16px;
        }

        .login div {
            width: 84px;
            height: 30px;
            background-color: #f5f5f5;
            margin-right: 15px;
            border-radius: 15px;
            text-align: center;
            line-height: 30px;
        }

        .login div a {
            height: 100%;
            width: 100%;
        }

        .list li {
            display: flex;
            /* 子元素垂直方向居中 */
            align-items: center;
            height: 90px;
            border-top: 1px solid #e8e8e8;
        }

        .list .list_img {
            width: 60px;
            height: 60px;
            margin: 0 10px 0 14px;
        }

        .list .list_img img {
            width: 100%;
        }

        .list .list_info {
            flex: 1;
        }

        .list .list_info h2 {
            font-size: 18px;
        }

        .list .list_info p:first-of-type {
            display: flex;
            /* 两端对齐 */
            justify-content: space-between;
            font-size: 14px;
            margin-top: 4px;
        }

        .list .list_info p:first-of-type span:last-of-type {
            margin-right: 14px;
            color: #17b994;
        }

        .list .list_info p:last-of-type {
            font-size: 12px;
            color: #888888;
            margin-top: 8px;
        }

        .more {
            height: 50px;
            background-color: #fafafa;
            line-height: 50px;
            border: 1px solid #e8e8e8;
            text-align: center;
        }

        a.more {
            display: block;
            width: 100%;
            height: 100%;
        }

        footer {
            height: 115px;
            text-align: center;
            font-size: 12px;
            line-height: 22px;
            padding-top: 27px;
            box-sizing: border-box;
            margin-bottom: 45px;
        }

        .tabbar {
            width: 100%;
            height: 45px;
            border-top: 1px #e8e8e8 solid;
            display: flex;
            /* 固定定位 */
            position: fixed;
            bottom: 0;
            background: #f6f6f6;
            font-size: 18px;
            color: #c2cfcc;
        }

        .tabbar i {
            font-size: 22px;
            position: relative;
            top: 2px;
        }

        .tabbar div {
            flex: 1;
            text-align: center;
            line-height: 45px;
        }

        .tabbar .active {
            background: #e7f3f0;
            color: #00b38a;
        }
    </style>

<body>
    <header>拉勾网</header>
    <section>
        <div class="login">
            <p>10秒定制职位</p>
            <div><a href="#">去登录</a></div>
        </div>
    </section>
    <ul class="list">
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
    </ul>
    <section>
        <a href="#" class="more">加载更多</a>
    </section>
    <footer>
        <p>@2015 lagou.com,all right reserved</p>
        <p>
            <a href="#">移动版</a>
            <a href="#">移动版</a>
            <a href="#">移动版</a>
        </p>
    </footer>
    <section class="tabbar">
        <div class="active"><i class="iconfont icon-home"></i> 职位</div>
        <div><i class="iconfont icon-sousuo-"></i> 搜索</div>
        <div><i class="iconfont icon-wode"></i> 我的</div>
    </section>
</body>

</html>

在这里插入图片描述

rem布局

  • 单位：
    • em:是一个相对单位，1em等于当前元素或父元素的font-size值。
    • rem:是一个相对单位，1rem等于根元素（html）的font-size值。
    • vw/vh：把屏幕分成100份,1vw等于屏幕宽的1%.
  • 动态设置font-size:
    • 通过 JS
    • 通过vw
      注：要给body重置一下font-size：16px；
      js动态设置font-size:
 layout viewport : document.documentElement.clientWidth

    iphone 6 : 375
    iphone 6 plus : 414

    iphone 6 : document.documentElement.clientWidth / 3.75 -> 100   65
    iphone 6 plus : document.documentElement.clientWidth / 3.75 -> 110.4 

 var fontsize = document.documentElement.clientWidth / 3.75;
 document.documentElement.style.fontSize = fontsize + 'px'

vw动态设置font-size:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 26.66667vw;
        }
    </style>
</head>

<body>
    vw：把屏幕分成100份，屏幕宽等于100vw
    iphone 375 1vw->3.75
    iphone plus 414 1vw->4.14
    如果在iphone 下等于100px,应该设置多少个vw?
    100/3.75=26.66667个
</body>

</html>

rem按正常布局就行，可以通过vscode安装插件px to rem，选中有px单位的元素，然后alt+z就会转换成rem单位
注意修改插件拓展中的值
在这里插入图片描述

eg:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拉钩网</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        html {
            font-size: 26.666667vw;
        }

        body {
            font-size: 16px;
        }

        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #555555;
        }

        img {
            display: block;
        }

        header {
            height: 0.45rem;
            line-height: 0.45rem;
            color: white;
            font-size: 0.2rem;
            text-align: center;
            background-color: #00b38a;
        }

        .login {
            /* 弹性布局 */
            display: flex;
            /*子元素两端对齐 */
            justify-content: space-between;
            /* 子元素垂直居中 */
            align-items: center;
            height: 0.43rem;
            font-size: 0.14rem;
        }

        .login p {
            margin-left: 0.16rem;
        }

        .login div {
            width: 0.84rem;
            height: 0.3rem;
            background-color: #f5f5f5;
            margin-right: 0.15rem;
            border-radius: 0.15rem;
            text-align: center;
            line-height: 0.3rem;
        }

        .login div a {
            height: 100%;
            width: 100%;
        }

        .list li {
            display: flex;
            /* 子元素垂直方向居中 */
            align-items: center;
            height: 0.9rem;
            border-top: 0.01rem solid #e8e8e8;
        }

        .list .list_img {
            width: 0.6rem;
            height: 0.6rem;
            margin: 0 0.1rem 0 0.14rem;
        }

        .list .list_img img {
            width: 100%;
        }

        .list .list_info {
            flex: 1;
        }

        .list .list_info h2 {
            font-size: 0.18rem;
        }

        .list .list_info p:first-of-type {
            display: flex;
            /* 两端对齐 */
            justify-content: space-between;
            font-size: 0.14rem;
            margin-top: 0.04rem;
        }

        .list .list_info p:first-of-type span:last-of-type {
            margin-right: 0.14rem;
            color: #17b994;
        }

        .list .list_info p:last-of-type {
            font-size: 0.12rem;
            color: #888888;
            margin-top: 0.08rem;
        }

        .more {
            height: 0.5rem;
            background-color: #fafafa;
            line-height: 0.5rem;
            border: 0.01rem solid #e8e8e8;
            text-align: center;
        }

        a.more {
            display: block;
            width: 100%;
            height: 100%;
        }

        footer {
            height: 1.15rem;
            text-align: center;
            font-size: 0.12rem;
            line-height: 0.22rem;
            padding-top: 0.27rem;
            box-sizing: border-box;
            margin-bottom: 0.45rem;
        }

        .tabbar {
            width: 100%;
            height: 0.45rem;
            border-top: 0.01rem #e8e8e8 solid;
            display: flex;
            /* 固定定位 */
            position: fixed;
            bottom: 0;
            background: #f6f6f6;
            font-size: 0.18rem;
            color: #c2cfcc;
        }

        .tabbar i {
            font-size: 0.22rem;
            position: relative;
            top: 0.02rem;
        }

        .tabbar div {
            flex: 1;
            text-align: center;
            line-height: 0.45rem;
        }

        .tabbar .active {
            background: #e7f3f0;
            color: #00b38a;
        }
    </style>

<body>
    <header>拉勾网</header>
    <section>
        <div class="login">
            <p>10秒定制职位</p>
            <div><a href="#">去登录</a></div>
        </div>
    </section>
    <ul class="list">
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
    </ul>
    <section>
        <a href="#" class="more">加载更多</a>
    </section>
    <footer>
        <p>@2015 lagou.com,all right reserved</p>
        <p>
            <a href="#">移动版</a>
            <a href="#">移动版</a>
            <a href="#">移动版</a>
        </p>
    </footer>
    <section class="tabbar">
        <div class="active"><i class="iconfont icon-home"></i> 职位</div>
        <div><i class="iconfont icon-sousuo-"></i> 搜索</div>
        <div><i class="iconfont icon-wode"></i> 我的</div>
    </section>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/weixin_44757417/article/details/106530144
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022