一、流式布局（百分比布局）介绍

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

<!--* @Author: 田根旺* @Date: 2021-12-24 11:11:30* @LastEditTime: 2021-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最小高度)

（49）移动端开发之流式布局（百分比布局）相关推荐

面对面翻译小程序是微信团队针对面对面沟通的场景开发的流式语音翻译小程序，通过微信同声传译插件提供了语音识别，文本翻译等功能。
面对面翻译小程序面对面翻译小程序是微信团队针对中英文面对面沟通的场景开发的流式语音翻译小程序,基于微信同声传译插件封装实现,提供了中英文语音识别,文本翻译等功能. 预览下载与使用克隆代码 pro ...
移动WEB开发之流式布局-京东案例
2. 视口视口(viewport)就是浏览器显示页面内容的屏幕区域. 视口可以分为布局视口.视觉视口和理想视口 2.1 布局视口 layout viewport 视口(viewport)就是浏览器显 ...
pink-移动web开发之流式布局
改变行高只是改变上下间距的大小, 目标: 知道移动WEB的开发现状写出标准的viewport 使用移动WEB的调试方法说出移动端常见的布局方案描述流式分布独立完成京东移动端首页 1. 移动端基 ...
移动WEB开发之流式布局
第一章:移动端: 1.1 移动端基础 1.2 视口 1.2.1布局视口layout viewport 1.2.2 视觉视口visual viewport 1.2.3 理想视口ideal viewpo ...
微信公众号开发之流式数据读取
用户发送信息到微信服务器,然后微信服务器向我们的服务器发送信息,这个信息属于一个流式的数据,我们要写一些方法处理这个数据我们新建libs文件夹,在文件夹下新建utils.js的文件,这个文件中主要写 ...
移动布局+百分比布局+em+rem+动态设置根元素fontSize
流式布局移动端大量使用CSS3盒子模型 box-sizing box-sizing: border-box; 很重要移动端特殊样式如何动态设置html的 font-size 开始 js动态设置代 ...
flex 左右布局_web前端学习：移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
flex 左右布局_移动端开发常用布局：前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
移动端开发—流式布局
移动端开发-流式布局一.单独制作移动端页面(主流) 通常情况下,网址域名前加m(mobile)可以打开移动端,通过判断设备,如果是移动端设备打开,则跳转到移动端页面二.响应式页面兼容PC端移动端( ...

（49）移动端开发之流式布局（百分比布局）

一、流式布局（百分比布局）介绍

二、注意事项

（49）移动端开发之流式布局（百分比布局）相关推荐

最新文章

热门文章