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

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

一：响应式

做一个响应式的页面。即只用一个链接，用媒体查询来控制样式。同一个链接但是pc打开与移动端打开是不一样的样式。

关于媒体查询，可以打开浏览器的调试模式模拟手机来看到各个移动设备的尺寸大小。

需要注意一点虽然iphone的像素很高，甚至比默写pc的显示器还要高，但是开发时媒体查询使用的还是iphone的开发尺寸。

今天做了一个匹配平板和手机的页面，我用的媒体查询是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;

}

}

二：做两套页面

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

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

var os = function () {

var ua = navigator.userAgent,

isWindowsPhone = /(?:Windows Phone)/.test(ua),

isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,

isAndroid = /(?:Android)/.test(ua),

isFireFox = /(?:Firefox)/.test(ua),

isChrome = /(?:Chrome|CriOS)/.test(ua),

isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),

isPhone = /(?:iPhone)/.test(ua) && !isTablet,

isPc = !isPhone && !isAndroid && !isSymbian;

return {

isTablet: isTablet,

isPhone: isPhone,

isAndroid: isAndroid,

isPc: isPc

};

}();

if(os.isPc){

location.replace("http://www.onlymid.com.cn/");

}

if (os.isAndroid || os.isPhone) {

location.replace('http://www.onlymid.com.cn/html/2016shujia/wap/');

} else if (os.isTablet) {

location.replace('http://www.onlymid.com.cn/html/2016shujia/wap/');

}

PS：可参考如下几个网站：