移动端 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. PBR

    https://iwantthatcake.wordpress.com/2012/02/22/real-time-radiosity-geometrics-enlighten/ http://www. ...

  2. mysql 数据类型

    1.整型 MySQL数据类型 含义(有符号) tinyint(m) 1个字节  范围(-128~127) smallint(m) 2个字节  范围(-32768~32767) mediumint(m) ...

  3. JavaScript闭包浅谈

    ------------------- 作者:willingtolove: 本文链接:http://www.cnblogs.com/willingtolove/p/4745889.html 1. 变量 ...

  4. tomcat启动的了，但是加载项目失败

    解决方法: 1.tomcat启动是好的,也有可能找不到tomcat的dll,所以,检查一下myeclipse所使用的tomcat的解压目录是不是有空格,有空格的话,重新解压到一个新目录,千万不要有空格 ...

  5. php中的高危函数

    phpinfo() 功能描述:输出 PHP 环境信息以及相关的模块.WEB 环境等信息. 危险等级:中 passthru() 功能描述:允许执行一个外部程序并回显输出,类似于 exec(). 危险等级 ...

  6. 小小C程序（九九乘法表）

    用一个简单的嵌套循环实现: #include <stdio.h> int main() { int i,j; ,j=i;i<=&&j<=;) { if (i== ...

  7. json 使用 （下）

    使用JSON JSON也就是JavaScript Object Notation,是一个描述数据的轻量级语法.JSON的优雅是因为它是JavaScript语言的一个子集.接下来你将看到它为什么如此重要 ...

  8. MySQL复制和集群

    一.复制配置 (A) 主从服务器相同版本的数据库 (B) 主服务器上复制使用的账户,具有相应的权限. (C) 修改主服务器的配置文件my.cnf,开启BINLOG,并设置server-id的值.重启后 ...

  9. 解决VS2015安装后stdio.h ucrtd.lib等文件无法识别问题

    今天突然想在windows上装个 VS2015 玩玩,结果遇到了如下bug:安装完 VS2015 后,直接新建项目->win32控制台->运行,结果报错!"无法打开包括文件: & ...

  10. zabbix触发器依赖

    触发器依赖 Zabbix - Router1 - Router2 – Host 如果router1宕机了,那么router2和host都不能连上,这样的话就会发router1.router2和host ...