html流式布局怎么用,css 流式布局什么意思?

流式布局,也叫百分比布局,是移动端开发中经常使用的布局方式之一。流式布局在CSS2时代就有,主要是靠百分比进行排版,可以在不同分辨率下显示相同的版式。

85a449db6251b56fc4038428478331f1.png

流式布局:网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),例如,设置网页主体的宽度为80%,min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。

这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那是屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:宽度使用百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调。

流式布局的特征:宽度自适应,高度写死,并不是百分百还原设计图。

图标都是固定死大小的,包括字体等也是固定死的。并不是所有的东西都是自适应的。

一些大的图片,设置宽度为百分比自适应即可,随着屏幕大小进行变化,对于小图标或者文本等, 一般都是定死宽高大小。

更多web前端开发知识,请查阅 HTML中文网 !!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值