pc端与移动端适配 解决方案

一般网站实现pc端与移动端适配的需求，方案有两个：

1、一套页面，从设计时就考虑到跨设备适配，响应式的一步到位；

2、开发两套页面，根据设备尺寸加载加载不同的资源，目前已经不常见了；

一：响应式方案

做一个响应式的页面。即只用一个链接，用媒体查询来控制样式。同一个链接pc和移动端打开都可以适配，有的模块是用两套不一样的css样式。

最近做了一个匹配平板和手机的页面，我用的媒体查询是768px。因为ipad的尺寸是1366*768

当设备宽度最大是768时说明该设备是手机或者是平板的竖屏，用一套样式；
如果设备宽度最小是768时，说明是平板横屏或者电脑屏幕，用另外一套样式。如下

@media only screen
and (min-device-width : 768px){
   
   
   .PaperTitle{
   
   
       padding: 0 8rem;
   }
}
@media only screen
and (max-device-width : 768px) {
   
   
    .PaperTitle{
   
   
	padding: 0 3rem;
    }
}

如果要用响应式的效果，最好从UI设计时就考虑到适配问题。设置宽度时，注意尽量用比率代替具体的数字。多测试页面在不同分辨率下的宽度展示效果。

比如网页的内容宽度其实是1100px，两边就做留白处理。不管用户的电脑有多宽，我们展示完1100px宽度的网页后，让网页居中，剩下的宽度平分在两边即可。这样我们能保证网页内的各个空间宽度比例在最好的范围内。

以前很多设计网页内容的宽度是铺满整个屏幕的，在现在的带鱼屏上就会把网页拉伸的非常难看。

我的博客就是采取的响应式方案，使用媒体查询的方式实现，具体地址：孙权的博客

二：做两套页面的方案

对外宣传用同一个链接，但是该链接在移动端与pc端打开，会分别自动跳转到两个不同的详细的链接。

js判断是pc或移动端核心代码如下：

<script type="text/javascript">
   var os = function