长沙手机网站设计:移动Web怎么做屏幕适配(二)


移动Web怎么做屏幕适配(一)

网页屏幕适配是一个老生常谈的话题,今天我们来捋一捋网页屏幕适配都有哪些常用的方法。

讲到屏幕适配,要先讲讲网页布局,网页布局就是你所看到网页的结构,一个个的格子区域,比如左边、右边、顶部、banner、边栏、footer(尾部)等部分组成了一个网页的布局。

固定布局 和 流式布局 是在网页设计中常用的两种布局方式。

固定布局 不管屏幕分辨率如何变化,访客看到的都是固定宽度的内容。它的好处是能如同平面媒体一样,版面上所有区域的大小都能维持不变,让用户的操作习惯不会受到不同大小的屏幕分辨率影响,多见于传统的PC网页。

流式布局 则一般有一个父容器,里边装着子容器。父容器可以自动的判断子容器是否需要换行,什么情况下需要换行。它不会像固定布局一样出现在左右两侧空白,或是被窗口框切掉。父容器根据浏览器的宽度和屏幕的大小进行自适应调整,子容器跟着父容器进行大小调整就好了。

既然是讲的屏幕适配(通常是流式布局),所以就看下常见的几种适配方式:

一、响应式

响应式布局是一种折中的设计方案,根据不同的屏幕分辨率显示不同的内容。但容易代码冗余,加载速度较慢。为什么会出现这样的问题呢?

简单来说,假如你设计了PC、移动、平板电脑 三种终端的适配方案,使用响应式布局,需要把PC、移动、平板的内容样式都准备好,当页面请求完成之后,再根据当前的屏幕尺寸显示最合适的方案,隐藏其他两种页面布局。

1.webp

该图片由来源于网络(优测网(wxutest))

上图是一些屏幕适配的效果,一般使用百分比来做定位,同时,为了照顾到较小的屏幕,通常需要预留一定的空间(也就是保持内容与内容之间的距离),以便在小屏幕下有足够的空间能挤下内容。

优点:

跨平台,节省人力与维护成本

缺点:

1、设计局限性较大。

设计师需要同时考虑PC、平板、手机几个终端设备的内容,尽量保持相同表现形式的情况下去传达原意,对设计师要求高,同时也需要做一些取舍,所以说是折中的方案。

2、页面代码冗余,加载时非按需加载,浪费带宽。通常响应式页面是同时下载多套CSS样式代码,还有视频、图片等资源一般也是统一加载的,这导致在手机上就下载PC/pad的冗余代码,其实毫无意义,浪费服务器带宽,还浪费用户的手机流量。

二、Cover与Contain

Cover和Contain是CSS3里的background-size(背景) 属性常用值。

background-size: length|percentage|cover|contain;

关于Cover 布局:

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

通俗来讲,就是:保持页面的宽高比,取宽或高之中的较小者占满屏幕,超出的内容会被隐藏。此布局适用于主要内容集中在中部,边沿无重要内容的设计。

应用到布局当中,Cover式布局的思想就是,把重要的东西集中在屏幕可视区域中间,无关紧要的东西平铺。多见于宽屏的官网设计,菜单和首页幻灯图左右100%拉伸,内容保持在中部。

2.webp

PC 侧例子

3.webp

移动侧例子,该图片由来源于网络(优测网(wxutest))

关于Contain布局:

把图像图像(等比例)扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

通俗来讲,保持页面的宽高比,取宽或高之中的较大者占满屏幕,不足的部分会用背景填充。这里的背景一般采用纯色或者可平铺的背景,以保持扩展之后背景与内容的协调性。

4.webp

该图片由来源于网络(优测网(wxutest))

优点:

cover: 覆盖,背景要覆盖元素的所有区域,没有空白。

contain: 包含,整个背景图都要被包含在元素内,没有超出的部分。

当窗口发生变化时,他们能根据客户端浏览器的大小进行自我的调整适应。

缺点:

cover: 屏幕较小时,边缘部分会被遮挡,要求设计时要将重要部分集中在中间区域。

contain: 屏幕较大时,会有大片的背景区域,同样对设计师要求也很高,要求此时页面能保持协调性。

好了,以上是常用的集中网页布局的思想。或许你会问,都在讲「适配」,那用什么作为长度单位呢?

有些读者可能读过了上一篇文章:《移动Web怎么做屏幕适配(一),感兴趣可以点菜单的「历史文章」看看,里边提到一个长度名词:Rem。

Rem 是CSS3中新增加的一个单位值,是一个相对单位,也就是区别于px(像素)、pt(点)等绝对单位长度的一种长度度量方式。

这里的相对怎么理解呢?比如青岛大虾的价格是变化的,螃蟹的价格根据青岛大虾来变化,1只螃蟹可以换3只青岛大虾。1只青岛大虾今天卖38元,那螃蟹就卖38*3=114 元1只;明天1只青岛大虾卖40元,那1只螃蟹就卖40*3=120元。

Rem(螃蟹)是相对于html标签的font-size(字体尺寸,青岛大虾)的。例如 html标签设置 font-size:36px,同时div设置width:1.2Rem。那么这个div的宽度就是1.2rem=1.2 * 36px = 43.2 px。

说到这里,你豁然开朗了吧?^_^