html5流式布局,流式布局是什么?流式布局详细介绍

在PC端进行网页制作时，经常使用固定像素并且内容居中的网页布局，为了适应小屏幕的设备，在移动设备和跨平台(响应式)网页开发过程中，多数使用流式布局，下面我们就对流式布局进行详细介绍。

流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下: 目标元素宽度/父盒子宽度=百分数宽度下面通过一个案例来演示固定布局如何转换为百分比布局，如demo4-1.html 所示。

固定布局转换为百分比布局

body>*{ width: 980px; height:auto; margin:0 auto;

margin-top:10px;

border:1px solid #000; padding:5px;}

header{ height:50px;}

section{ height: 300px;}

footer{ height:30px;}

section>*{ height:100%; border:1px solid #000; float:left;}

aside{ width:250px;}

article{ width:700px; margin-left:10px;}

header

nav

aside

article

footer

打开Chrome浏览器访问demo4-1.html，页面效果如下图所示。

可以尝试改变浏览器窗口的大小，页面元素的大小不会随浏览器窗口改变，如下图所示。

下面修改demo4-1样式代码，将所有宽度修改为百分比的形式，具体如下:

body>*{ width:95%; height:auto; margin:0 auto; margin-top:10px;

border:1px solid #000; padding :5px; }

header{ height:50px; }

section{ height: 300px; }

footer{ height:30px;}

section>*{ height:100%; border:1px solid #000; float:left; }

aside{ width:25.510204%; /*250÷980*/}

article{ width: 71.428571%; /*700÷980*/margin-left:1.0204088%;}

刷新页面，缩小浏览器，页面按百分比随浏览器逐渐缩小，显示完整，页面效果如下图所示：

html5流式布局,流式布局是什么?流式布局详细介绍相关推荐

Android自定义ViewGroup的布局，往往都是从流式布局开始
前言前面几篇我们简单的复习了一下自定义 View 的测量与绘制,并且回顾了常见的一些事件的处理方式. 那么如果我们想自定义 ViewGroup 的话,它和自定义View又有什么区别呢?其实我们把 V ...
流式布局之javascript实现照片瀑布流以及Macy.js插件实现瀑布流
文章目录瀑布流的定义一.实现效果代码首先是用javascript自己手写代码实现照片瀑布流使用插件Mary.js照片流插件实现照片瀑布流总结瀑布流的定义瀑布流是什么? 1.琳琅满目:整 ...
html手机响应式布局,手机网页设计中的响应式布局
随着各种特性和智能手机浏览器的发展,网页能够根据设备显示变得很重要.我们不用再根据桌面浏览器窗口尺寸建立网站,然后让它们在更小的移动浏览器上渲染.现在,我们可以让元素大小和布局针对设备作出改变. 在C ...
html 响应式布局九宫格,两种方法实现响应式九宫格布局
html布局以及基础样式代码如下响应式九宫格 html, body { color:#222; margin:0; padding: 0; text-decoration: none; } ul { ...
Centos7下SRS流式服务器搭建、推流、拉流
Centos7下SRS流式服务器搭建.推流.拉流 1. 设计目的 2. 实验内容 3. 实验过程 1. 设计目的本报告从SRS服务器的部署入手,分析视频摄像头RTSP流媒体协议向RTMP流媒体协议的 ...
html如何制作响应式网站,使用HTML和CSS构建响应式网站布局
大多数现代网站使用响应式网页设计,现在您必须考虑实际反应的意义,响应式网站可以适应不同的屏幕尺寸,并可以相应地调整其设计和布局. 在本教程中,我们将学习如何使用HTML和CSS进行响应式网站设计,但首 ...
全球及中国分散式风电项目开发建设及十四五战略布局分析2021-2027年
全球及中国分散式风电项目开发建设及十四五战略布局分析2021-2027年 HS--HS--HS--HS--HS--HS--HS--HS--HS--HS--HS--HS-- [修订日期]:2021年11 ...
旋流式沉砂池计算_以高效旋流器为核心的超低成本选煤技术
最近研究了一些选煤案例,有一个重要的发现,那就是在厂型一定的情况下,不同的设计差距太大,一些指标差距范围在10~40%不等,这是很可怕的.比如说新星选煤厂,在总煤泥含量达到40%,不脱泥全粒级入选的情 ...
200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se
200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se ...

html5流式布局,流式布局是什么?流式布局详细介绍

html5流式布局,流式布局是什么?流式布局详细介绍相关推荐

最新文章

热门文章