原型如下：

要求如下：适应各种机型

源码如下：

<!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. 设计模式之十二：状态模式(State)

    状态模式: 当一个对象的内部状态发生变化时同意改变它的行为. Allow an object to alter its behavior when its internal state changes ...

  2. 妙味css3课程---1-1、css中自定义属性可以用属性选择器么

    妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

  3. hbs模板（zmaze ui用的）

    hbs模板(zmaze ui用的) 一.总结 1.模板引擎:就是来生成界面的啊,只不过实现了view和数据分离以及一些其它的功能(预加载等). 2.Handlebars :但他是一个单纯的模板引擎,在 ...

  4. 为什么选择Solr？

    在大型的SQL数据库上很难执行高速的查询有Solr是Apache 下的一个开源项目,使用Java基于Lucene开发的全文检索服务: 它是一个独立的企业级搜索应用服务器,它对外提供类似于Web-ser ...

  5. h.264硬件解码

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

  6. 【组件】微信小程序input搜索框的实现

    开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin ...

  7. nginx源代码分析--事件模块 &amp; 琐碎

    通过HUP信息使得NGINX实现又一次读取配置文件,使用USR2信号使得NGINX实现平滑升级. 在nginx中有模块这么一说,对外全部的模块都是ngx_module_t类型,这个结构体作为全部模块的 ...

  8. Linux字符界面安装图形界面XWindow

    https://jingyan.baidu.com/article/219f4bf790f4c7de442d3825.html

  9. oled屏幕模块

    oled屏幕模块似乎是厂家提供的 也许可以根据屏幕驱动芯片去写 根据现在了解的芯片一般有两个:SH1106和SSD1306 不过这次我们用的是SSD1306芯片驱动的屏幕 下面是从裸屏到模块的pcb: ...

  10. 30分钟学会如何使用Shiro（转）

    本篇内容大多总结自张开涛的<跟我学Shiro>原文地址:http://jinnianshilongnian.iteye.com/blog/2018936 我并没有全部看完,只是选择了一部分 ...