Use global variable for tablet media query in responsive.less

The Vector skin's responsive mode originally used 768px as a hardcoded
value for the media query set up in skin.json. I attempted to
switch to the @deviceWidthTablet global Less variable provided by
MediaWiki inside skin.json, but this would not work under any
circumstances. Evidently, ResourceLoader does not compile Less, so
it just ignores the media query if it contains a Less variable.
I was forced to leave the media query within skin.json blank
and hard-code it into responsive.less. When using the
@deviceWidthTablet variable inside responsive.less, it worked
fine. Obviously this is not ideal, as I am bypassing ResourceLoader,
but I have no other choice. See this comment (T124994#2864136) for
details.

Bug: T124994
Change-Id: I28565e5ba88be41dcd9cb38fc09cffe29d263e06

responsive.less

@@ -4,13 +4,14 @@
 	left for it.
 */
 
-div#mw-head {
+@media screen and ( max-width: @deviceWidthTablet ) {
+	div#mw-head {
 		position: static !important; /* stylelint-disable-line declaration-no-important */
 		margin-top: 0.5em;
-}
+	}
 
-/* Move the panel to the bottom and display it as in-line lists */
-div#mw-navigation {
+	/* Move the panel to the bottom and display it as in-line lists */
+	div#mw-navigation {
 		div#mw-panel {
 			display: table;
 			position: static;
@@ -28,15 +29,15 @@ div#mw-navigation {
 				list-style: none;
 			}
 		}
-}
+	}
 
-/* Hide the logo and tabs */
-div#p-logo {
+	/* Hide the logo and tabs */
+	div#p-logo {
 		display: none;
-}
+	}
 
-/* Rearrange various page elements to fill the now-available space */
-body div#footer {
+	/* Rearrange various page elements to fill the now-available space */
+	body div#footer {
 		margin-left: 0;
 		padding-top: 0;
 
@@ -45,8 +46,8 @@ body div#footer {
 		li#footer-info-viewcount {
 			display: none;
 		}
-}
-div#p-personal {
+	}
+	div#p-personal {
 		display: table;
 		position: relative;
 		width: 100%;
@@ -57,52 +58,53 @@ div#p-personal {
 		ul {
 			padding-left: 0;
 		}
-}
-div#right-navigation {
+	}
+	div#right-navigation {
 		position: absolute;
 		top: inherit;
 		right: 0;
 		margin-top: 0;
 		float: none;
-}
-div#left-navigation {
+	}
+	div#left-navigation {
 		position: absolute;
 		top: inherit;
 		margin: 0;
 		display: block;
 		float: none;
-}
-div#p-namespaces,
-div#p-views,
-div#p-variants {
+	}
+	div#p-namespaces,
+	div#p-views,
+	div#p-variants {
 		position: relative;
 		top: 2.5em;
-}
-div#p-namespaces {
+	}
+	div#p-namespaces {
 		padding-left: 0;
-}
-div#p-cactions {
+	}
+	div#p-cactions {
 		top: 2.5em;
 		float: right;
-}
-div#p-search {
+	}
+	div#p-search {
 		float: none;
 		position: absolute;
 		right: 0;
 		width: 100vw;
 		margin: 0;
-}
-div#simpleSearch {
+	}
+	div#simpleSearch {
 		margin: 0 3em;
 		width: 80vw;
 		padding: 0;
-}
-div.vectorMenu div.menu {
+	}
+	div.vectorMenu div.menu {
 		left: inherit;
 		right: -1px;
-}
-div#content {
+	}
+	div#content {
 		/* Hide the 1px blue border on the left side */
 		border-left: 0;
 		margin-left: 0;
+	}
 }

skin.json

@@ -45,11 +45,9 @@
 		"skins.vector.styles.responsive": {
 			"targets": [ "desktop", "mobile" ],
 			"position": "top",
-			"styles": {
-				"responsive.less": {
-					"media": "screen and (max-width: 768px)"
-				}
-			}
+			"styles": [
+				"responsive.less"
+			]
 		},
 		"skins.vector.js": {
 			"scripts": [