移动端 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. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  2. php sleep

    实例一:把时间输出十次,但全部有结果了,才在html浏览器页面输出 ;$i<;$i++){ echo time()."<br>"; sleep(); } echo ...

  3. 怎么把本地项目和远程git仓库相连通

    1. 打开在你的项目文件夹,输入下面的命令 git init 输完上面的命令,文件夹中会出现一个.git文件夹,如下图所示,其他的的文件也会出现蓝色小问号的标志 2. 添加所有文件 git add . ...

  4. 浅谈Android样式开发之布局优化

    引言 今天我们来谈一下Android中布局优化常用的一些手段.官方给出了3种优化方案,分别是</include>.</viewstub>.</merge>标签,下面 ...

  5. Oracle下批量将一个用户的所有表的select权限赋值给另外一个用户

    起因 为什么会有这篇文章呢? 因为最近在做项目的时候遇到一个问题...实际生产环境中程序datasource登陆的Oracle数据库用户user1不是我们创建的.这个用户没有访问我们业务表的权限(因为 ...

  6. Windows无法完成安装，若要在此计算机上安装Windows，请中心启动安装。

    现在安装系统已经很简单了,我觉得U盘启动的话两步就差不多了, 壹:设置BIOS,将U盘启动作为系统默认启动选项 贰:直接进去大白菜之类的,一键安装... 今天终于看到第三部了, 报错:Windows无 ...

  7. ELK 集中日志分析 windows部署实战

    一步步来 1.下载软件 Elasticsearch: https://download.elasticsearch.org/...p/elasticsearch/2.0.0/elasticsearch ...

  8. (转)EasyUI-datagrid-自动合并单元格

    1.目标 1.1表格初始化完成后,已经自动合并好需要合并的行: 1.2当点击字段排序后,重新进行合并: 2.实现 2.1 引入插件 /** * author ____′↘夏悸 * create dat ...

  9. github with msysgit:配置SSH Key

    Step 1: Check for SSH keys First, we need to check for existing ssh keys on your computer. Open up G ...

  10. php中计算二维数组中某一元素之和

    [0] => array(5) { ["id"] => string(2) "11" ["name"] => string ...