流水式布局

本文探讨了移动Web开发中遇到的兼容性问题,特别是在基于WebKit内核的浏览器上。介绍了移动Web与PC端的主要区别,重点在于自适应布局设计。详细解释了流式布局的运用,包括宽度自适应和高度固定的特点,以及如何通过rem和百分比结合实现完全自适应。同时,文章还提到了移动端经典模块布局,如左侧固定右侧自适应的设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、兼容性问题
在国内的移动web浏览器绝大部分都是基于webkit内核的,所以一些css3和h5的新特性绝大部分都被支持,需要添加前缀,但是,不同机型之间可能会略有不同,所以需要自己踩坑。
1
2、移动web和PC相比的差异性在哪里
移动web的只要核心就是做自适应的布局,在手持设备上基本都是通栏,并且布局的细节比PC端要少,文字内容和模块也相对偏少
1
3、移动端常见的布局–流式布局(百分比布局)
【1】流式布局(百分比布局)
流式布局是移动web开发使用的常用布局方式之一。
1
【2】流式布局下的几个页面特征:
宽度自适应,高度写死,不能百分百去还原设计图
一些小ICON 图标等都是写死的 不是所有的东西都是自适应的,一般都是模块会呈现自适应
一些产品插入图也就是img等都默认设置宽度百分百,让其自动保持等比例缩放,一般不予写死
字体大小等都是写死的

【注意】常用的是rem结合流式布局的写法,使用rem去计算高度,百分比去计算宽度,实现宽高完全自适应。
1
【3】移动端经典的几个模块布局
1)左侧固定,右侧自适应

左侧盒子直接写死宽高,并且浮动;右侧盒子直接不写宽,直接用margin-left去挤出距离,这个盒子默认会自动内减
1

左侧固定右侧自适应
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值