原型如下：

要求如下：适应各种机型

源码如下：

<!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. Linux下vi替换字符命令操作实例

    在Linux下的开发中,经常涉及到对文件里的字符进行处理,当中,对字符的替换操作也是非常的频繁. 本文以一个实际的文件为例,具体介绍了Linux下经常使用的vi替换字符命令,为相关的开发工作提供给了參 ...

  2. [转载]Google Java Style 中文版

    转自:http://www.blogjava.net/zh-weir/archive/2014/02/08/409608.html Google Java Style 中文版     基于官方文档20 ...

  3. 《社交红利》读书总结--如何从微信微博QQ空间等社交网络带走海量用户、流量与收入

    <社交红利--如何从微信微博QQ空间等社交网络带走海量用户.流量与收入>--徐志斌 著 <社交红利>这本书2013年9月才上市,卖的非常火. 我最初是在公司内部的期刊上,看到有 ...

  4. 洛谷 P3131 [USACO16JAN]子共七Subsequences Summing to Sevens

    P3131 [USACO16JAN]子共七Subsequences Summing to Sevens 题目描述 Farmer John's NN cows are standing in a row ...

  5. FMS2015：NVMe SSD的高可靠性及数据保护

    FMS2015是一个充满技术干货的平台,各领域技术大拿在峰会上分享的技术和产品都影响甚至主导着闪存下一阶段的发展. 此次Memblaze的project师团队也是从存储系统.PCIe SSD以及闪存控 ...

  6. amazeui学习笔记--css（常用组件9）--导航nav

    amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...

  7. Hadoop3.0配置

    1.core-site.xml <configuration> <property> <name>fs.default.namenode</name> ...

  8. docker基础（二）

    1.base镜像的特点 (1)不依赖于其他的镜像 (2)其它的可以通过它位基础作为容器的底层 2.在下载镜像的时候,只有几百M,但是安装一个Ubuntu虚拟机的镜像就比较大,首先会想到图形化界面,其实 ...

  9. 11.1 Android显示系统框架_framebuffer原理及改进

    1. Android显示系统框架Android Graphic UI with GPU Hardware Accelerationhttps://community.nxp.com/docs/DOC- ...

  10. Django 学习笔记（二） 《models》

    python 2.7.6 Django1.8.3 IDE eclipse+pydev Django开发的模式就是MTV(c)模式(model. template, view(urls)). 对于mod ...