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

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

posted @   JasNature  阅读(6243)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae