Free HTML5 by FreeHTMl5.co September 10, 2019

移动端Web页面适配方案

移动端web页面的开发,由于手机屏幕尺寸、分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问题。

早期网页设计采用静态布局,通过标签中的applicable-device应用设备标识识别移动设备,即,在标签中的viewport标签中设置width,通过js动态修改标签的initial-scale使得页面等比缩放,刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用px为单位,这种方案实现简单,不存在兼容性问题,但用户体验很不友好。

后面出现流式布局,使用百分比%定义宽度,高度使用px固定,根据可视区域大小实时进行尺寸调整,通常使用max-width/min-width控制尺寸范围过大或者过小。这种方案实现比较简单,但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形,字体大小无法随屏幕大小发生变化。

顺应不同页面字体大小展现问题,出现了弹性布局。这种布局方案下,包裹文字的元素的尺寸采用em/rem为单位,页面主要划分区域的尺寸依据情况使用px、百分数或者em/rem。如一些高校的网站 jlu,页面的主要划分区域使用px和百分比,包裹文字的元素和文字采用em。

上面的这几种方案下,页面元素的大小按照屏幕分辨率进行适配调整,但是整体布局不变,对于响应式web设计,网页布局会随着访问它的视口及设备的不同呈现不同的样式,在实现上可能会以上多种方案的结合,同时搭配 媒体查询 技术使用,使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果,如 mashable 。