原型如下：

要求如下：适应各种机型

源码如下：

<!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>

若需要转载，联系原文作者
更多技术文章，行业交流，web前端开发资源，源码下载，请点击原文链接：祈澈姑娘
或者联系我的微信，姑娘家家创作不易，走过路过点个赞呗

手机端自适应布局demo的更多相关文章

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

    手机端自适应布局demo原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html> <head> <me ...

  2. 第九十四节，html5+css3移动手机端流体布局，旅游部分，媒体查询

    html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...

  3. 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

  4. 第九十二节，html5+css3移动手机端流体布局，开篇知识

    html5+css3移动手机端流体布局,开篇知识 将项目设计成移动端可访问的页面,项目采用的是流体布局.也就是宽度以百分比自适应的,因为手机的屏幕大小不一致  一．整体设计     首先 我们要了解一 ...

  5. 织梦M手机端/自适应网站内容图片变形解决办法

    我们在做响应式网站或者织梦M功能手机站的时候,会发现如果内容页图片太大,在移动端显示会变形,dede手机端图片过长等问题,手机端文章内容页图片不能自适应!这给通过手机端浏览网站的用户造成了很不好的用户 ...

  6. （淘宝无限适配）手机端rem布局详解（转载非原创）

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  7. （淘宝无限适配）手机端rem布局详解

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  8. 怎么设置table(表格)手机端自适应宽度

    我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验.这里就 ...

  9. 移动端适配（手机端rem布局详解）

    1. 问题的引出 如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10 ...

随机推荐

  1. 找不到或无法载入主类 org.jivesoftware.openfire.starter.ServerStarter

    刚接触openfire的配置就出现了这个错误.解决方法非常easy,忘记了将openfire的源文件加入到user entries中了

  2. ZZUACM 2015 暑假集训 round 01

    A. Encoding Problem Description Given a string containing only 'A' - 'Z', we could encode it using t ...

  3. Elasticsearch和MongoDB

    Elasticsearch和MongoDB分片及高可用对比 本文旨在对比Elasticsearch和MongoDB高可用和分片的实现机制. Elasticsearch ES天生就是分布式的,那她又是如 ...

  4. h.264硬件解码

    // H264HWDecoder.m // H264EncoderDecoder // // Created by lujunjie on 2016/11/28. // Copyright © 201 ...

  5. React render return 空行问题

    Uncaught Invariant Violation: App.render(): A valid React element (or null) must be returned. You ma ...

  6. C#中对XML的操作

    现在有一个xml文件,名称:BookStore.xml,数据如下: <?xml version="1.0" encoding="gb2312"?>& ...

  7. 洛谷——P2515 [HAOI2010]软件安装

    https://www.luogu.org/problem/show?pid=2515#sub 题目描述 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中 ...

  8. 洛谷 P1691 有重复元素的排列问题

    P1691 有重复元素的排列问题 题目描述 设R={r1,r2,……,rn}是要进行排列的n个元素.其中元素r1,r2,……,rn可能相同.使设计一个算法,列出R的所有不同排列. 给定n以及待排列的n ...

  9. vs2015 EF code first 问题待解决

    在vs 2013 上可以成功ef 生成代码.EF power Tools 安装在vs 2015 :一般不可安装, 把扩展名改成zip,解压缩. 打开extension.vsixmanifest文件 找 ...

  10. （转）ORA-01940: cannot drop a user that is currently connected 问题解析

    删除数据库用户的时候经常会遇到这样的错误: ORA: cannot drop a user that is currently connected 原因是有程序在连接我们需要删除的用户,我们删除用户之 ...