苏宁易购pc端与移动端布局的探索与思考

一.前言

现在用户浏览网页并不局限于pc端,同样也可以通过移动设备,而且移动设备给用户带来了极大方便,这就要求开发者并不仅仅专注于传统的pc端页面的实现,同样也要考虑移动端的实现。不同公司的产品在移动端的实现上采用的方案也是不尽相同的。下面我将以苏宁易购在pc端以及在移动端的实现为基础来学习是他们是怎么样处理pc端与移动端的关系的,并且谈谈个人的一些思考。

二.苏宁易购pc端与移动端的页面布局的特点

首先要说明的是苏宁易购的pc端页面和移动端页面是两套独立的页面。

  • pc端

    1.通栏与版心

    作为前端开发者,在页面的实现上应该要有通栏和版心的概念。版心和通栏在pc端页面上基本都会有体现。

    通栏,不管浏览器窗口的宽度如何,总是占满整个水平区域,而版心总是水平居中。苏宁易购的pc端页面中,背景基本都是以通栏的形式出现,而他的头部,主体,尾部都是以版心的形式出现的,并且版心设定了固定的值。

    2.不针对屏幕大小做处理

    在改变浏览器窗口大小时可以发现,苏宁易购并没有针对屏幕的大小改变,在页面布局,元素大小,字体大小上做相应的处理。因为设置了版心的宽度,如果用户要完整的浏览整个页面,浏览器窗口宽度不能小于版心的宽度。

  • 移动端(m站)

    1.媒体查询+rem布局

    查看苏宁易购移动端页面的前端代码,可以发现在页面布局上使用媒体查询针对屏幕大小的不同设置html元素的字体大小的不同,其余的所有元素都是以rem作为单位,从而实现在不同屏幕大小下元素的动态改变,包括字体的大小。

    2.两边固定,中间自适应

    要实现这种效果可以使用圣杯布局或者双飞翼布局,这两种布局我在之前关于京东移动端页面的实现中有介绍,最常见的应用就是搜索模块。

三.pc端与移动端是否是同一套页面

现在看来,很多的网站在pc端和移动端都准备了两套独立的页面,这样便于维护。在访问该网站的时候,先判断当前访问的设备,如果是pc端就返回pc端的页面,如果是移动端就返回移动端的页面。并不是我们所认为的同一套页面,通过媒体查询判断当前设备的屏幕大小,来加载不同的css样式。这就意味着,在pc端与移动端的的实现上有两种的方案,一式采用同一套的页面,通过加载不同的样式实现不同的效果;二是采用连套独立的不同的页面。

这两种方案,各有优劣。首先明白的是,前后端的交互模式。目前,前后端的交互模式基本是前后端分离,前端通过接口访问数据,再将数据进行处理后显示在页面相应的位置上。

如果说,pc端和移动端使用的是同一套页面,只是css样式的不同,那么从接口获取数据并处理这一部分工作只需要做一次就好,但是,这种方式对css的要求高,需要开发者针对不同的屏幕大小设置相应的样式,说到样式,相信很多开发者对抠细节连连叫苦。这并不是一件很轻松的事,至少对有强迫症的人来说是一件很烦的事。另外还有一个问题,页面的显示效果与HTML结构是有一定的关系,有时候我们会为了某种显示效果而写出这样的结构。如果不同屏幕下要显示不同的效果,而同一套页面的结构却是一样的,这在效果实现上可能会带来一定的麻烦。

如果pc端与移动端是两套独立的页面,这就意味着从接口获取数据并处理要分别进行两次,当然,css也是要分别写两套。但是由于是独立的两套页面,各自可以专注于各自的实现,也有利于维护。要注意的是,如果两端是各自独立的页面,在pc端可以不考虑字体大小动态变化,在移动端则要考虑。

四.PC端与移动端页面是如何适应各种大小的屏幕的

不管是pc端还是移动端的页面(HTML+CSS部分)实现过程,应该是这样的,先整体布局,再细节处理。pc端页面与移动端页面在实现的时候都要考虑在不同的显示大小下,是否能保证页面的正常显示。就这一个问题,pc端考虑的侧重点和移动端的侧重点又有所不同。

pc端针对屏幕的大小不一致,在布局上可以采用媒体查询来实现显示效果的最优化,不管屏幕是足够小还是足够大的情况下,媒体查询都是一个很好的解决方案。当然,如果觉得费事的话,也可以采用设定页面的min-width值,在屏幕足够小时可以通过滚动条来浏览页面。不管采用的是哪种方案其实是看实现的需求。

移动端针对屏幕的大小不一致,可以采用媒体查询或者flex布局。尽管移动端有各种各样的屏幕大小,但是不管在哪种屏幕下,一般都是不会出现横向的滚动条,这一点与pc端有所不同。另外,由于移动端的屏幕比较小,因此在字体的大小上也是要做相应的考虑与处理的。

五.PC端页面与移动端页面的切换

当用户访问一个页面时,怎么样自动识别当前设备是PC端还是移动端,并且加载相应的页面呢?

<script>
	if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
	window.location.href = "移动端URL";
} else {
	window.location.href = "PC端URL";
}
</script>

不难发现,苏宁易购的pc端和移动端的页面访问地址是不一样的。因此,这里需要注意的是pc端的页面和移动端的页面是完全独立的两套页面,并不是同一套页面加载不同的样式从而达到不同的显示效果。

六.rem布局

1.rem单位

rem是一个相对单位,是相对html元素的字体大小

比如,根元素(html)设置 font-size:10;非根元素设置font-size:2rem;则换成px就是20px;

rem的优势:父元素文字的大小可能不一致,但是整个页面只有一个html,可以很好控制整个页面的元素的大小。

2.rem布局的思想

内容参考自前端响应式布局原理与方案(详细版)

  • 一般不要给元素设置具体的宽度,但是对于一些小图标可以设定具体宽度值
  • 高度值可以设置固定值,设计稿有多大,我们就严格有多大
  • 所有设置的固定值都用rem做单位(首先在HTML总设置一个基准值:pxrem的对应比例,然后在效果图上获取px值,布局的时候转化为rem值)
  • js获取真实屏幕的宽度,让其除以设计稿的宽度,算出比例,把之前的基准值按照比例进行重新的设定,这样项目就可以在移动端自适应了

七.媒体查询

1.定义

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

2.语法

具体的参数请参照文档

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
/*如果文档宽度小于300px则修改背景颜色位lightblue:*/
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

针对不同的媒体使用不同的stylesheets

<link media="screen and (max-width: 300px)" rel="stylesheet" href="css/screen_pc.css">

八.媒体查询+rem实现元素动态变化

我们在实现移动端页面的时候,我们希望,在不同的屏幕大小下,所看到的页面布局是合理的,元素大小是合适的。举个例子,总不能让用户在很小的屏幕下,看到的字体是很小的,这对用户来说体验并不好。因此,为了解决这个问题,可以采用媒体查询+rem实现元素的动态变化。苏宁易购移动端页面的实现就是一个很好的实践。

html{
    font-size:100px;
}
/*1.媒体查询控制html的字体大小*/
@media screen and (min-width:320px){
    html{
        font-size:50px;
    }
}
@media screen and (min-width:640px){
    html{
        font-size:50px;
    }
}
/*2.页面中所有的元素的单位用rem作为单位*/

九.总结

如果一个网站要同时实现pc端和移动端都能够访问,那就要考虑是采用同一套页面还是采用独立的页面。个人认为,最佳的实践就是pc端和移动端相互独立,因为这有利于维护。而在这前提下,不管是在pc端的实现上还是在移动端的实现上,苏宁易购的做法是值得学习的。

https://juejin.im/post/5e201cf7f265da3e11359f3f

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论