移动端技术选型之流式布局

最新推荐文章于 2024-08-21 17:46:40 发布

MDR_0820

最新推荐文章于 2024-08-21 17:46:40 发布

阅读量96

点赞数 1

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/MDR_0820/article/details/120639267

版权

1.单独制作移动端页面

流式布局（百分比布局）
fiex弹布局
les+rem+ 媒体查询布局
混合布局

2.响应式页面兼容移动端

媒体查询
bootstarp

1.1 单独制作移动端页面布局之流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局
通过盒子的宽度设置百分比来根据屏幕的宽度进行伸缩不受固定像素的限制内容像两侧填充
流式布局方式是移动web使用比较常见的布局方式
max-width 最大宽度设置最大放大宽度超过参数就不在放大
min-width 最小宽度设置最小缩小参数小过参数不在缩小

下面展示下代码随着宽度一起伸缩

<style>
        *{
         /*  清除内外边距   */
            margin: 0;
            padding: 0;
        }
        div{  
         /* 一直在居中显示 */
         margin: 0 auto;                    
            width: 100%;
              /* 设置最大宽度  超过980px 就不能再放大  */
            max-width: 980px;   
          /*  设置最小宽度 最小不小于320px */
            min-width: 320px;
        }
        div span{
            float: left;
            display: block;  
            width: 50%;
            height: 200px;
        }
        div span:nth-child(1){
  
        background-color: hotpink;
        }
        div span:nth-child(2){

        background-color:skyblue;
        }
    </style>
</head>
<body>
    
    <div>
        <span>2</span>
        <span>1</span>
    </div>

MDR_0820

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端技术选型之流式布局

1.单独制作移动端页面流式布局（百分比布局）fiex弹布局les+rem+ 媒体查询布局混合布局2.响应式页面兼容移动端媒体查询bootstarp1.1 单独制作移动端页面布局之流式布局（百分比布局）流式布局，就是百分比布局，也称非固定像素布局通过盒子的宽度设置百分比来根据屏幕的宽度进行伸缩不受固定像素的限制内容像两侧填充流式布局方式是移动web使用比较常见的布局方式max-width 最大宽度设置最大放大宽度超过参数就不在放大min-width 最小宽
复制链接

扫一扫