移动web页面适配

前言

由于最近工作原因,需要开发移动端的网页,除了页面兼容性问题,就是页面适配了,在此分享下几种实践过的页面适配解决方案
首先我建议各位去看看之前写的一篇《移动web网页开发细节》,下面讲的都是默认已做好基本操作

当前比较常用的适配解决方式

  • 宽高采用百分比
# 我们需要在页面底部有一层绝对定位
<style type='text/css'>
#container {
        position: absolute;
        -webkit-overflow-scrolling: touch; /* 在IOS设备上可以有缓动效果 */
        overflow: auto;
        top: 0;
        bottom: 0; 
        width: 100%;
        box-sizing: border-box; 
        -webkit-overflow-scrolling: touch;
}
</style>
<body>
        <div id='container'>
               <!-- do something -->
        </div>
</body>

如此操作,就可以在纵向使用百分比设置高度,因为在width和height都是相对于上一级已知宽高而言的,document是没有高度设置的,所以直接使用height是无效的

  • 宽高以rem为单位
<style type='text/css'>
html {
font-size: 62.5%
}
@media only screen and (min-width: 481px) {
    html {
        font-size:94%!important
    }
}
@media only screen and (min-width: 561px) {
    html {
        font-size:109%!important
    }
}
@media only screen and (min-width: 641px) {
    html {
        font-size:125%!important
    }
</style>

rem是相对根元素字体大小的相对单位,也就是说会根据根元素(即html元素)的font-size属性而变化大小,同时配合CSS的媒体查询,我们可以方便地定制rem的值,从而达到屏幕大小不同,rem的值不同,有效帮助屏幕适配

  • 视口缩放
<meta name="viewport" content="width=640,minimum-scale=0.7,maximum-scale=1.3,user-scalable=no" />
  • 这是head中常见的一个meta标签,然而很多时候,大家只是用来限制用户的手动缩放,缺没有利用它来进行视口的匹配
  • 淘宝的手机版网页就充分利用了视口的缩放特性,有兴趣可以去研究下
  • 例如,我们编写的网页,常以640px的宽度作为开发标准,我们就设定视口宽度为640px,网页在移动端显示的时候,就会以640px的设备宽度显示网页,然而并不是所有移动设备都是640的宽度,我们为了友好的适配480px – 980px之间的设备
  • 这里我们将视口的缩放设置成最小缩放0.7倍,最大缩放1.3倍
  • 如此一来,浏览器会在显示网页的时候,以640px为基本视口宽度,在0.7 – 1.3倍的缩放空间内进行自适应,页面会被放大或者缩小,以此填满屏幕,在适度的试用下,该方案效果很好
  • 不过切忌对网页进行大范围的缩放操作,因为如果视口被拉伸得太大,会让网页显示的效果变得模糊,就好比你把一张图放大,总会看到像素点

Flex布局

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便

在开发类似app功能的移动web时,个人建议尽量采用flex布局,会让最后的网页更容易接近app的效果,关于flex布局,可以参考阮一峰的博客Flex 布局教程,感觉写的很基础详细,在此不多做记录

合理搭配使用

实际使用中,对以上几种方案还是需要有一定取舍,切忌试图以一种方式解决到底,很多时候都是事倍功半

  • 百分比还是建议在设置宽度时采用
  • rem建议只针对字体大小使用
  • 视口可以小范围缩放,达到对页面的精度适配
  • 采用flex布局,有助于在移动app中维持页面的基本结构完整
    原文作者:感觉被掏空
    原文地址: https://www.jianshu.com/p/713b7f290590
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞