JS implements simple code for responsiveness-JS Tutorial-php.cn

JS implements simple code for responsiveness

PHPz

Release： 2017-04-03 15:33:38

Original

2208 people have browsed it

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

Copy after login

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.

<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" href="" id="rwdlink" />　　<script type="text/javascript">　　　　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";

　　　　　　}

　　　　}

　　</script></head>

Copy after login

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!