移动端 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. Eclipse中.calsspath文件解析

    来自帅气的Sublime Text

  2. iPhone屏幕尺寸/launch尺寸/icon尺寸

    屏幕尺寸 6p/6sp     414 X 736 6/6s         375 X 667 5/5s         320 X 568  4/4s         320 X 480   la ...

  3. github免密码设置

    在创建好了github账号之后,我们可以新建自己的github项目.然而,我们在本地代码升级维护的过程中,涉及到git操作的时候并不是想每次都重新输入密码.这个时候我们需要使用ssh和私钥(公钥)来方 ...

  4. bootstrap Table 中给某一特定值设置table选中

    bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...

  5. 如何在Android应用中引入外部网页

    在某些情况下,我们需要在Android应用中引入外部网页,这里记录一下如何操作(其实很简单^.^). 先介绍一下开发环境: 开发工具:Android Studio 1.5 SDK API版本:17 操 ...

  6. 模板化的七种排序算法，适用于T* vector<T>以及list<T>

    最近在写一些数据结构以及算法相关的代码,比如常用排序算法以及具有启发能力的智能算法.为了能够让写下的代码下次还能够被复用,直接将代码编写成类模板成员函数的方式,之所以没有将这种方式改成更方便的函数模板 ...

  7. Sublime Text 3 Plugin Better!

    Package Control Cmake ConvertUTF Markdown preview MarkdownEditing Marking Changed Rows

  8. Autoit3 正则表达式 匹配汉字

    关于Autoit3正则匹配汉字,在网上搜来搜去都是雷同的内容,[\u4e00-\u9fa5] 然而,Invalid all the time 直到认真钻研Help File,最终又看到了这个 http ...

  9. JavaScript倒计时

    倒计时: 1.设置一个有效的结束日期 2.计算剩余时间 3.将时间转换成可用的格式 4.输出时钟数据作为一个可重用的对象 5.在页面上显示时钟,并在它到达0时停止 <div id="c ...

  10. nuget的搭建及多源冲突

    为什么使用nuget来管理类库引用就不再阐述,好处真的一抓一把.在使用nuget的时候,我们如果总去访问别人的nuget源,受限于网络情况的好坏,速度真的没法保证,更别说访问国外的源了.那好,我们来自 ...