响应式布局设计全过程

响应式页面布局的详细过程

分为以下几个步骤：

1引入样式一个pc端，一个移动端。这里我没有做平板的样式，重点是引入css后，添加的代码段media后面那段话，设置页面宽度值，用以判断加载哪一个css

<link rel="stylesheet" type="text/css" href="css/index.css" media="(min-device-width:421px)" />
<link rel="stylesheet" type="text/css" href="./css/index_2.css"media="(min-device-width:320px) and (max-device-width:420px)" />

2这里是pc 和移动端判断的条件两个都是头部最外层的元素

3 在data里面填写上判断条件    这里是我定义的条件(platform: "window",)

4这里是判断你的屏幕宽度，用以判断你是处在pc  还是移动端

created() {
			// 检测用户设备
			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.isAndroid || os.isPhone) {
				// alert("手机")
               
				this.platform = 'phone'
			} else if (os.isTablet) {
 //没有写平板的样式所以我一刀切的  只要大于我设计的移动端样式 我全部转变成pc
				// alert("平板")
				this.platform = 'window'
			} else if (os.isPc) {
				// alert("电脑")
				this.platform = 'window'
			}
		},

到此 样式的替换pc和移动端  全部结束         

标签：pc,os,布局,isAndroid,响应,全过程,&&,test,ua
来源： https://blog.csdn.net/weixin_45777732/article/details/117386624