100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > (49)移动端开发之流式布局(百分比布局)

(49)移动端开发之流式布局(百分比布局)

时间:2020-03-18 03:17:39

相关推荐

(49)移动端开发之流式布局(百分比布局)

一、流式布局(百分比布局)介绍

流式布局,就是百分比布局,也称非固定像素布局。通过将盒子的宽度设置成百分比,从而根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。

<!--* @Author: 田根旺* @Date: -12-24 11:11:30* @LastEditTime: -12-24 11:29:53* @LastEditors: Please set LastEditors* @Description: 移动端布局—流式布局* @FilePath: \web\demo24.html--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><title>移动端布局—流式布局</title><style>body {min-width: 320px;max-width: 980px;}section {width: 100%;height: 100px;background-color: pink;}section div {float: left;width: 50%;height: 100px;background-color: skyblue;border: 10px solid #ff0;box-sizing: border-box;}</style></head><body><section><div class="box1">1</div><div class="box2">2</div></section></body></html>

二、注意事项

制作过程中,需要定义页面的最大和最小支持宽度。

max-width最大宽度(max-height 最大高度)

min-width最小宽度(min-height最小高度)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。