Home > Article > Web Front-end > JS implements simple code for responsiveness
JS implements simple code for responsiveness
- PHPzOriginal
- 2017-04-03 15:33:382209browse
1. CSS implementation of responsiveness
CSSThe implementation of responsiveness mainly relies on CSSMedia query:
A media query consists of an optional media type and zero or more expressions to limit the scope of the style sheet using media attributes ,For example: width, height, color. Media queries in CSS3 allow content to be rendered only for a specific range of output devices without having to change the content itself. That is, determine the screen width through media queries and load different CSS style sheets
The code is as follows: Note that there must be a default style sheet without media queries , otherwise there will be no style sheet when accessed in IE8.
<head> <meta charset="UTF-8"> <title>响应式的演示</title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/index1200.css" /> <link rel="stylesheet" type="text/css" href="css/index980.css" media="screen and (min-width:980px) and (max-width:1200px)"/> <link rel="stylesheet" type="text/css" href="css/index640.css" media="screen and (min-width:640px) and (max-width:980px)"/> <link rel="stylesheet" type="text/css" href="css/index320.css" media="screen and (max-width:640px)"/> </head
2. JS implements responsiveness
JSResponsive realization also relies on Externally connect different CSS style sheets, and selectively load different CSS style sheets by obtaining the screen width of different devices.
93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7响应式的演示6e916e0f7d1e588d4f442bf645aedb2f 36cd3b2ddc05fe575a9951c3bb566f83 0138a88b79d3bacb8491d5e7d7e27258 4c41bd30c55f798d965853cf38c818f4 8019067d09615e43c7904885b5246f0a var rwdlink = document.getElementById("rwdlink");
setCSS();
window.onresize = setCSS;
function setCSS(){
var windowWidth = document.documentElement.clientWidth;
if(windowWidth >= 1200){
rwdlink.href = "";
}else if(windowWidth >= 980){
rwdlink.href = "css/index980.css";
}else if(windowWidth >= 640){
rwdlink.href = "css/index640.css";
}else{
rwdlink.href = "css/index320.css";
}
}
2cacc6d41bbb37262a98f745aa00fbf09c3bca370b5104690d9ef395f2c5f8d1
The above is the detailed content of JS implements simple code for responsiveness. For more information, please follow other related articles on the PHP Chinese website!