首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端切图:手机端自适应布局demo

前端切图:手机端自适应布局demo

作者头像
王小婷
发布2018-06-01 17:46:33
1.5K1
发布2018-06-01 17:46:33
举报
文章被收录于专栏:编程微刊编程微刊

手机端自适应布局demo 原型如下:

图片发自简书App

要求如下:适应各种机型源码如下:

<!DOCTYPE html >
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
        <!--<link rel="stylesheet" type="text/css" href="css/main.csss" />-->
        <style>
            .container {
                border: 1px solid #F0F1F1;
                -webkit-box-shadow: 0px 3px 3px #c8c8c8;
                -moz-box-shadow: 0px 3px 3px #c8c8c8;
                box-shadow: 0px 3px 3px #c8c8c8;
            }
            
            .search {
                height: 42px;
                margin: 0 20px;
            }
            
            .search_left {
                float: left;
                margin: 14px 7px 5px 11px;
                width: 8px;
                height: 8px;
                border-radius: 50px;
                border: 3px solid orangered;
                font-size: 12px;
                text-align: center;
                line-height: 30px;
            }
            
            .search_input {
                float: left;
            }
            
            .search_input input {
                border: none;
                height: 30px;
                margin-top: 5px;
            }
            
            .search_right {
                float: right;
                width: 20px;
                height: 20px;
                margin: 9px 17px 5px 10px;
            }
            
            .search_right img {
                width: 100%;
                height: 100%;
            }
            
            .start {
                height: 42px;
                margin: 80px 30px 40px 30px;
                border: 1px solid #F0F1F1;
                -webkit-box-shadow: 0px 3px 3px #c8c8c8;
                -moz-box-shadow: 0px 3px 3px #c8c8c8;
                box-shadow: 0px 3px 3px #c8c8c8;
                background: #ff4343;
                color: #FFFFFF;
                text-align: center;
                line-height: 40px;
                border-radius: 50px;
            }
            
            .back {
                height: 42px;
                margin: 0px 30px;
                border: 1px solid #F0F1F1;
                -webkit-box-shadow: 0px 3px 3px #c8c8c8;
                -moz-box-shadow: 0px 3px 3px #c8c8c8;
                box-shadow: 0px 3px 3px #c8c8c8;
                background: #FFFFFF;
                color: #1E1F20;
                text-align: center;
                line-height: 40px;
                border-radius: 50px;
            }
        </style>
        <title>高校地图</title>
    </head>

    <body>
        <div class="container">
            <div class="search" style="border-bottom: 1px  solid  #F0F1F1;">
                <div class="search_left"></div>
                <div class="search_input"><input type="text" placeholder="定位失败,手动设置"></div>
                <div class="search_right"><img src="img/scale_search.png" alt="放大" /></div>
            </div>

            <div class="search">
                <div class="search_left"></div>
                <div class="search_input"><input type="text" placeholder="电梯间"></div>
                <div class="search_right"><img src="img/scale_search.png" alt="放大" /></div>
            </div>
        </div>

        <div class="start">开始规划路线</div>
        <div class="back">返回</div>
    </body>

</html> 
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.11.28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档