移动端 css/html (box-flex)自适应、等比布局

对于移动端自适应的一种布局方式。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title></title>

    </head>

    <style type="text/css">

        .boxcontainer{

            display: box;

            display: -moz-box;

            display: -webkit-box;

            border: 1px solid red;

            height: 32px;

            min-width: 100px;

        }

        .boxcontainer>div{

            box-flex: 1;

            -webkit-box-flex: 1;

            -moz-box-flex: 1;

        }

        .boxcontainer>div>input{

            min-width: 50px;

            width: 100%;

            box-sizing: border-box;

            height: 32px;

            border: 0;

        }

        .boxcontainer>a{

            min-width: 50px;

            display: inline-block;

            border: 1px solid red;

            height: 32px;

            line-height: 28px;

            text-align: center;

        }

    </style>

    <body>

        <div class="boxcontainer">

            <div>

                <input type="text" id="" value="" />

            </div>

            <a href="javsscript:;">搜索</a>

        </div>

    </body>

</html>

展示：

平板

大手机屏幕

小手机屏幕

本次布局主要是对于

box-sizing: border-box;

和

display: box;

display: -moz-box;

display: -webkit-box;
box-flex: 1;

-webkit-box-flex: 1;

-moz-box-flex: 1;

配合的理解，这样的布局无需担心width：百分比的溢出问题，全贴合边框。

参考链接

http://www.css88.com/book/css/properties/flexible-box/box-flex.htm

移动端 css/html (box-flex)自适应、等比布局的更多相关文章

  1. 七种CSS左侧固定,右侧自适应两栏布局

    一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...

  2. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  3. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  4. css 一行自适应等比例布局

    一.浮动布局+百分比 .row { width:100%; overflow:hidden; zoom:1; } .item { float: left; width: 20%; } 该样式兼容性较好 ...

  5. CSS两列高度自适应，右边自适应

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. css高度已知，左右定宽，中间自适应三栏布局

    css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. CSS hover box

    CSS hover box transition 踩坑指南, display: none; 作为初始状态,不会产生动画效果,必须设置 height: 0; 或 width: 0; 来实现隐藏! tra ...

  8. web前端开发常用的10个高端CSS UI开源框架

    web前端开发常用的10个高端CSS UI开源框架   随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...

  9. CSS 学习笔记 - Flex 布局

    传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...

随机推荐

  1. Android SDK升级后报错error when loading the sdk 发现了元素 d:skin 开头无效内容

    把错误位置的devices.xml这个文件删除,再把sdk里面tools\lib下的这个文件拷贝到你删除的那个文件夹里,重启eclipse

  2. iOS视频边下边播--缓存播放数据流

    实现视频边下边播,这里的边下边播不是单独开一个子线程去下载,而是把视频播放的数据给保存到本地.简而言之,就是使用一遍的流量,既播放了视频,也保存了视频. 用到的框架:<AVFoundation/ ...

  3. EF Core 杂记

    本系列文章,将介绍本人在学习和使用EF Core的过程中的收获与心得. 或许有的地方讲的错误 欢迎大家批评指出. 1.EF Core 数据库迁移(Migration)

  4. 如何查看编译安装的lnmp环境各自的配置参数

    安装好后如何查看mysql/apache/nginx/php安装参数   查看mysql编译参数: cat /usr/local/mysql/bin/mysqlbug | grep CONFIGURE ...

  5. SQL 删除索引错误

    SQL Server 数据库执行 ”DROP INDEX 索引名 ON 表名“ 时出现“不允许对索引 '索引名' 显式地使用 DROP INDEX.该索引正用于 PRIMARY KEY 约束的强制执行 ...

  6. 【学习笔记】Struts2之一个Action包含多个控制处理逻辑

    一.使用Action的动态方法调用     如果一个页面包含多个按钮,系统分别提交给Action的不同方法处理.此时可以采用DMI(Dynamic Method Invocation,动态方法调用)来 ...

  7. EBS 11i 的工作流列表

    总帐模块(GL) GIS(Global Intercompany System)通知 GL自动分配 GL成批分配流程 GL分配流程 GL过帐流程 GL经常性日记帐流程 PA分配组流程 日记帐审批 应付 ...

  8. 转载自lanceyan： 一致性hash和solr千万级数据分布式搜索引擎中的应用

    一致性hash和solr千万级数据分布式搜索引擎中的应用 互联网创业中大部分人都是草根创业,这个时候没有强劲的服务器,也没有钱去买很昂贵的海量数据库.在这样严峻的条件下,一批又一批的创业者从创业中获得 ...

  9. Ajax深入解析

    AJAX:Asynchronous JavaScript And Xml(异步的JS和XML) 同步:客户端发起请求>服务端的处理和响应>客户端重新载入页面(循环) 异步:客户端实时请求& ...

  10. java反射

    知识点1:获取类字节码的三种形式 1.Class date = Date.class;//根据类名获取字节码 2.Date date= new Date(); date.getClass();//对象 ...