一.前言

现在用户浏览网页并不局限于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总设置一个基准值：px和rem的对应比例，然后在效果图上获取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端的实现上还是在移动端的实现上，苏宁易购的做法是值得学习的。