移动端 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. [Unity3D]UI界面之瞄准镜设置说明

    9空格设计 : 比如说4个角的图案固定,拉伸的时候不受影响 通过设置 左上右下来: 通过创建Image对象,将设置好的图片关联到Source Image 调整瞄准镜跟随飞机, 注意这里设置的Z轴向量是 ...

  2. IO例子

    1.用字节读取一个文件,替换换行符,并打印 String fileName = "src/learnIO/Stream.java"; FileInputStream in = ne ...

  3. 看着水了一天的群，终于看到一段高质量的代码了分享一下localStorage

    _history : { //缓存 isLocalStorage:window.localStorage?true:false, set : function(key,value){ //设置缓存 i ...

  4. [Tomcat] Tomcat的classloader

    定义 同其他服务器应用一样,tomcat安装了各种classloader(classes that implement java.lang.ClassLoader) Bootstrap | Syste ...

  5. [Machine Learning & Algorithm]CAML机器学习系列2：深入浅出ML之Entropy-Based家族

    声明:本博客整理自博友@zhouyong计算广告与机器学习-技术共享平台,尊重原创,欢迎感兴趣的博友查看原文. 写在前面 记得在<Pattern Recognition And Machine ...

  6. MySQL自动化运维之用mysqldump和mysqlbinlog实现某一数据库的每周全备和每天差异备份，并添加到执行计划【热备】

    案例: 线上有一数据库,需要每周全备一次,每天差备一次[安全起见还是差备吧,不要增备,不要吝啬磁盘哦,而且差备恢复还很快] 1.每周对数据库hellodb做完全备份 crontab任务计划: * * ...

  7. 常用Linux命令收集

    关闭 php-fpm: ps -ef | grep php-fpm  或    ps aux | grep php-fpm kill -USR2 32253  (对应的进程PID) kill -9 进 ...

  8. 第3月第19天 cxx_destruct dispatch_get_main_queue()死锁

    1. http://blog.jobbole.com/65028/ 2. - (void)viewDidLoad { [super viewDidLoad]; NSLog("); dispa ...

  9. 中文编程语言Z语言开源正式开源!!!

    (Z语言基于.NET环境,源码中有很多高技术的代码,让更多的人知道对大家有会有很好的帮助,请管理员一点要批准放在首页) 本人实现的中文编程语言Z语言现在正式开源,采用LGPL协议. 编译器核心的网址为 ...

  10. HTTP返回码中301与302的区别 (转载)

    一．官方说法 301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于:  301 redirect: 301 代表永久性转移(Permanently Moved). 302 ...