原型如下：

要求如下：适应各种机型

源码如下：

<!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. 循环体（for/while）循环变量的设置

    1. 求滑动(移动)平均(moving average) double partialSum = 0; for (int i = 0; i < M-1; ++i) partialSum += A ...

  2. 6.CPP风格数组

    //数组初始化 1 #include <iostream> using namespace std; void main() { //C int a[5] = { 1,2,3,4,5 }; ...

  3. 跟我一起学extjs5(42--单个模块的数据新增方式)

    跟我一起学extjs5(42--单个模块的数据新增方式)         前面的章节中已经增加了一个自己定义的模块,而且能够进行数据的新增.改动.删除的操作了,在这个基础上就能够大作文章了. 这一节来 ...

  4. 【原创】基于pyautogui进行自动化测试

    前期准备: python3.6 pyautogui pywinauto 以下代码实现内容: 1.打开记事本 2.记事本中输入This is a test 3.保存内容 4.退出进程 import py ...

  5. RMAN异机复制数据库（不同路径）

    1.恢复参数文件 设置环境变量: export ORACLE_SID=hncdfhq 登录RMAN: rman target / 在RMAN里把数据库起到nomount状态: startup nomo ...

  6. shell脚本一键安装mysql5.7.x

    使用脚本一键安装mysql5.7.x,初始化数据库.启动数据库---- mysql版本号:源代码mysql5.7.10 linux版本号:centos6.5 x86_64 #!/bin/bash GR ...

  7. Android中各种drawable的使用

    转载请说明出处.本文来自Android菜鸟:http://blog.csdn.net/android_cai_niao/article/details/46854767  QQ:2717521606 ...

  8. 【20.23%】【codeforces 740A】Alyona and copybooks

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  9. [Angular2 Form] Angular 2 Template Driven Form Custom Validator

    In this tutorial we are going to learn how we can also implement custom form field validation in Ang ...

  10. hdu Minimum Transport Cost(按字典序输出路径)

    http://acm.hdu.edu.cn/showproblem.php? pid=1385 求最短路.要求输出字典序最小的路径. spfa:拿一个pre[]记录前驱,不同的是在松弛的时候.要考虑和 ...